Setup

Nazox s a fully featured premium admin dashboard template in VueJs with developer-friendly codes. It is based on Vue CLI & Vuex component framework with Firebase authentication. We have not used jquery in this theme its pure VueJs admin theme with reusable components. We have added multi langauge support with i18n from which you can simply add new languages.

Prerequisites

Please follow below steps to install and setup all rerequisites:

  • Node

    Make sure to have the Node installed & running in your computer. If you already have installed node on your computer, you can skip this step. Node version must be greater then equal to 10.

  • Git

    Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

  • Vue.js

    Make sure to have the Vue cli installed globally in your computer. If you already have installed on your computer, you can skip this step.

Installation

To setup the admin template, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer.

  • Install Dependencies

    Open your terminal at the root directory of the project, go to your folder and enter the command yarn install. This would install all the required dependencies in the node_modules folder.

To setup authentication with Firebase or Fack-backend please follow the below steps. Default it has fack-backend authentication setup.

Setup Firebase or Fack-Backend authentication.

Default we have set fack-backend authentication in this template. You can simply change to firebase or fack-backend by changing in .env file.
Fack-backend : VUE_APP_DEFAULT_AUTH=fack-backend

To setup firebase authentication fill the below details in the .env file.
Firebase : VUE_APP_DEFAULT_AUTH=firebase

VUE_APP_DEFAULT_AUTH=firebase
VUE_APP_APIKEY=
VUE_APP_AUTHDOMAIN=
VUE_APP_DATABASEURL=
VUE_APP_PROJECTId=
VUE_APP_STORAGEBUCKET=
VUE_APP_MESSAGINGSENDERID=
VUE_APP_APPId=
VUE_APP_MEASUREMENTID=

After you finished with the above steps, you can run the following commands to run the project locally or build for production use:

Command Description
npm install This would install all the required dependencies in the node_modules folder.
npm run dev Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:3000.
npm run build Generates a /dist directory with all the production files.
i18n Language translation settings

How to add new language? Let add French language in the existing language.

  1. Create a new file src/locales/fr.json
  2. update the below code in the languages array in src/components/topbar.vue file
    import de_flag from "@/assets/images/flags/de.jpg";
    {
        flag: de_flag,
        language: "de",
        title: "German",
    },