• 4+ dashboard Layouts
• 5+ Use-Case App Concept
• Register, Login, Reset password & Error Pages
• Built with Bootstrap 5, SASS
• Calendar, Mailbox, Chats, Kanban apps
• Nice layout for user profile and user details page
• Cross-browser compatibility
• Fully Responsive Design
• Handmade custom icons.
• Neat, clean and simple design
• Advanced Form Elements
• Fast & Dedicated Support
• Easy to Customize with SCSS Variables
• Lifetime Free Updates
• And many more features available

• Install dependencies:

  npm install

• Run dev server:

  npm run serve

• Open the link: http://localhost:8080 to view it in your browser.

Our Nioboard Vue application is based on Vue CLI. for more detailed information of the Vue CLI, visit the official Vue CLI documentation website.

• 1. For production build, run the following command.
• npm run build

• 2. After run above command, a new folder will be created in root folder called build folder.
• 3. Create a subdomain on cPanel
• 4. After creating subdomain, Zip the build folder and upload it to subdomain.
• 5. Now open your subdomain in browser to view.

    
    |--docs/
    |--react/
    |--|--src/
    |--|--|--assets/
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--scss/
    |--|--|--components/
    |--|--|--|--chart/
    |--|--|--|--|--ChartBar.js
    |--|--|--pages/
    |--|--|--|--auths/
    |--|--|--|--|--AuthLogin.js/
    |--|--|--|--Home.js
    |--|--|--|--HomeEcommerce.js
    |--|--|--router/
    |--|--|--|--index.js
    |--|--|--|--store/
    |--|--|--|--|--icons/
    |--|--|--|--|--products/
    |--|--|--|--|--users/
    |--|--|--|--utilities/
    |--|--|--|--|--timePicker.js
    |--|--|--App.vue
    |--|--|--package.json
    

• 1. Create a file named ExamplePage.Vue inside the src/pages/ folder. note: you can give any name.
• <template> 
      <h1>Hello World!</h1>
  </template>
  
  <script>
      export default {
          name: 'ExamplePage'
      };
  </script>
      

• 2. Add the file to src/router/index.js
• import { createRouter, createWebHistory } from 'vue-router';
          
  // import pages
  const Home = () => import('@/pages/Home.vue');
  const HomeEcommerce = () => import('@/pages/HomeEcommerce.vue');
  const HomeProject = () => import('@/pages/HomeProject.vue');
  const HomeMarketing = () => import('@/pages/HomeMarketing.vue');
  const HomeNft = () => import('@/pages/HomeNft.vue');
  
  // 1 added here
  const ExamplePage = () => import('@/pages/ExamplePage');
                  
  const routes = [
      {
          path: '/',
          name: 'Analytics',
          component: Home,
          alias: '/home'
      },
      {
          path: '/home-nft',
          name: 'NFT',
          component: HomeNft
      },
      { // 2 added here
          path: '/example-page',
          name: 'Example Page',
          component: ExamplePage
      },
  ];
  

• 3. Add the file to Sidbar Menu, open src/layout/default/Menu.vue. file and scroll to border-bottom you will see menuData array where we putted all sidebar menus. you just add a object separred by comma. see example below how we added a menu object separred by comma.
• const menuData = [
      {
          id: 3,
          icon: 'layout',
          title: 'ExamplePage',
          url:   '/example-page',
      },
  ];

• Create a component called .vue file extension and put the code inside it

  This is the new file, we named it TodoItem.vue:

  <template> 
      <h1>Hello World!</h1>
  </template>
  
  <script>
      export default {
          name: 'TodoItemComponent'
      };
  </script>
  

  Now we created a file named TodoItem. To be able to use the TodoItem component in another file, you have to import the file where you want to use. see below example how we used TodoItem in another component.

• <template> 
      <h1>Todos</h1>
  
      <TodoItem /> // 3 here
  
  </template>
  
  <script>
      import TodoItem from 'relative_path/TodoItem.vue'; // 1 import
  
      export default {
          name: 'TodosComponent',
          components: {
              TodoItem // 2 register here
          }
      };
  </script>
  

Folder Structure

To create an application with multiple page routes, let's first start with the file structure.

Within the src folder, we'll create a folder named pages with several files:

src\pages\:

• About.vue
• Contact.vue

Above Each file will contain some contents.

• Basic Usage

  Now we will use our Router in our src/router/index.js file.

  import { createRouter, createWebHistory } from 'vue-router';
                                  
  //Pages
  const Home = () => import('@/pages/Home.vue');
  const Contact = () => import('@/pages/Contact.vue');
  
  const routes = [
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    },
  ]
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  export default router
  

• Linking page

  Below is the example how to use router path URL with vue router RouterLink component.

  <template>
     <RouterLink to="/contact">Contact</RouterLink>     
  <template />
  
  <script>
      import { RouterLink } from 'vue-router';
  
      export default {
          name: 'AboutComponent'
      };
  </script>