Setup | Skote - Vuejs Admin & Dashboard Template

Introduction

Skote is 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.

Skote is an admin dashboard template that is a beautifully crafted, clean & minimal designed admin template with Dark, Light Layouts with RTL options. You can build any type of web application like Saas based interface, eCommerce, Crypto, CRM, CMS, Project management apps, Admin Panels, etc.

It will help your team moving faster and saving development costs and valuable time. If you’re a developer and looking for an admin dashboard that is fully responsive with Bootstrap and VueJs without jquery then you are at the right place to start your project using Skote - Vuejs Responsive Bootstrap v5.1.1 Admin Dashboard.

Skote contains lots of new design widgets with responsive on all screens. Also, there are 6 different types of Layouts we have added. It is very easy to change any layout in your existing running application by changing couple of lines code only as its managed with scss. We have written standard and developer-friendly code to increase performance.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our profile page or sent email on themesbrand@gmail.com

Setup Firebase or Fake-Backend authentication

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

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=

Prerequisites

Please follow below steps to install and setup all prerequisites:

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.
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 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.

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

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 serve`	Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:8080.
`yarn build`	Generates a `/dist` directory with all the production files.

Widget loader is set on port 8080, if you are working on another port add your port in .env file VUE_APP_URL variable.

i18n Language translation settings

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

Create de.json file in src/locales folder.

Add new language property in /src/components/nav-bar.vue file.

languages = [{
    flag: require("~/assets/images/flags/germany.jpg"),
    language: "de",
    title: "German",
}];

To change default language to german? update below code in the .env file.
```
VUE_APP_I18N_LOCALE=de
VUE_APP_I18N_FALLBACK_LOCALE=de
```

Tips

SCSS: We suggest you to do not change any scss files from the src/assets/scss/_custom.scss folders because to get new updates will might be break your SCSS changes if any you have made. We strongly suggest you to use custom.scss file and use that instead of overwrite any theme's custom scss files.