VueJS Version

Shreyu - Vue version is based on the popular frameworks Bootstrap and Vue v2. It uses the top-notch libraries, including Vuex, Vue Router, Vuelidate and many more. The super clean and flexible layouts would enable you to easily build web applications including a quick MVP or solid product.

What's included

Extract the zip file you received after purchase and you would find the exact below files and folders:

  • shreyu/vue --
    • ├── src
      • ├── assets
        • ├── fonts - fonts files
        • ├── images- images files
      • ├── components - Reusable components
      • ├── design - all scss (sass) files
      • ├── router
        • ├── layouts - All layouts implementation
          • ├── default- A empty layout - mainly used in auth related pages
          • ├── vertical- Left side navbar with topbar, footer and right side bar
          • ├── horizontal - Horizontal Topbar and top navbar, footer and right side bar
        • ├── views/pages - All the pages
        • ├── routes.js - The routing declaration
      • ├── state - State management using Vuex - containing module wise actions, mutations, etc
      • ├── utils - Common utilities implementation
    • ├── public - public files
    • ├── App.vue - Main application component
    • ├── package.json
    • ├── README.md
Pre-requisites

Shreyu - Vue is bootstraped using Vue CLI v3. Please follow below steps to install and setup all pre-requisites:

  1. Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed nodejs on your computer, you can skip this step.

  2. Yarn

    Yarn is a package manager and dependency management. It allows easy management of all the third party dependency and plugins.

    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.

  3. Git

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

Getting Started

Once you have all pre-requisites installed and running, you are ready to get start with the Shreyu. First, go to the root folder (the folder created when you extract the zip) where the package.json is available and run the following command:

yarn install

This will download all required dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules where you'll be able to see downloaded packages.

Now you're good to go in running the template and view it in browser by running the command below:

yarn dev

The template should be up and running in your browser.

You can also create a production ready build by running the command below:

yarn build

This will create a folder named dist in same folder. You might want to take this folder and deploy on root of your web server.

Routing

Shreyu Vue is having routing setup based on Vue-Router. We have solid routing way already implemented in theme which would make your job easy when dealing with any routing related changes.

You can easily add, change or remove any route by simply making changes described below:

  1. Open src/routes.js file
  2. You can add/edit/delete any entry for new view/page by declaring it. Make sure to provide path and other properties like name, component, icon, and meta in constants routes declared there. E.g.

    {path: '/dashboard2', name: 'Dashboard2', component: Dashboard2, route: PrivateRoute, icon: 'home' },

    Each of these properties are explained below:

    • path - Url relative path
    • name - Name of your route
    • component - Actual component name which would get rendered when user visits the path
    • icon - The feather icon name which you would like to show there along with menu label. Note that the children does not need this.
    • meta - authRequired - A flag indicate that this route is accessible without authentication or not
Note that Shreyu supports the nested routing very well. If you would declare children in your route config, the sidebar menu as well top navigation would display child menu items respectively.
Customization Layout and Sidebar

You can change or customize the overall layout or left side navigation easily. There are examples available for horizontal nav, dark theme, RTL, condensed side nav, fixed width (boxed), etc. You can modify the left side nav, topbar, etc.

How to change left side nav width?

In order to change the width of left side navigation bar, open a file src/design/_variables.scss and change the value of variable $leftbar-width. The default value is set to 240px.

How to change background or menu text color?

In order to change the background color, open a file src/design/_variables.scss and change the value of variable $bg-leftbar-light the default light value is set to #ffffff, $bg-leftbar-dark the default dark value is set to #323742.

When you change the background color, you might want to change the color of menu accordingly. To change the color of menu item, change the variable $menu-item (Default is set to #4B4B5A). Similarly, change the value of variables $menu-item-hover and $menu-item-active.

You can change other styles by making modifications in src/design/custom/structure/_left-menu.scss.

How to change to dark theme?

You can easily change to dark mode by simply making changes for import statement in a file src/design/index.scss. Just comment out the import stataments of variables.scss and bootstrap.scss and uncomment the import statements of variables-dark.scss and bootstrap-dark.scss

2019 © Shreyu. All Rights Reserved. Crafted with by Coderthemes