Setup | Minible Vue Nuxt JS Admin & Dashboard Template

Setup Vue Nuxt JS

Introduction

Minible is built with Vue Nuxt JS with developer friendly code. You can simply change the layouts and mode using this template.

Prerequisites

Please follow below steps to install and setup all prerequisites:

Nodejs
Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.
Yarn
Make sure to have the Yarn installed & running in your computer. If you already have installed yarn on your computer, you can skip this step.
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.

Installation

To setup the admin theme, 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.

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 : NUXT_AUTH=fack-backend

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

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
`yarn`	This would install all the required dependencies in the `node_modules` folder.
`yarn dev`	The development server is accessible at http://localhost:3000/.
`yarn build`	It will create a production build.

Multi Language Settings

Create de.json file with reference to default language file and add it to app/modules/locales folder.
Go to app/modules/locales/index.js file and import that language file. It will automatically configure that language with i18n.

In components/layouts/utils/topBar.js add new language properties in LanguagesWithFlag array.

import the flag first using

 import GermanyFlag from "~/assets/images/flags/germany.png";

Then add new language in LanguagesWithFlag.

LanguagesWithFlag = [{
    flag: GermanyFlag,
    language: "de",
    title: "German",
}];