Vuely
  • Introduction
  • Folder Structure
  • Vuely VueJs
    • Different Layouts
      • Adding Menu In Different Layouts
    • Installation
    • Adding New Component
    • Translate The App(Multi Language Support)
    • Adding New Widgets
    • Themes
    • Style Customization
    • Build an App from Scratch
    • Seed Project
    • Deployment
    • UI Components
      • Buttons
      • Cards
      • Selection controls
      • Carousel
      • Chips
      • Date/Month Pickers
      • Dialog
      • Grid
      • Input / Text field
      • List
      • Menu
      • Progress
      • Banner
      • Select
      • Slider
      • Tabs
      • Toolbar
      • Timepicker
      • Forms
  • Vuely-Laravel
    • Folder Structure
    • Installation Vuely-Laravel
    • Customization
  • Vuely-Laravel with Api Authentication
    • Getting Started
    • Passport Authentication
    • Run Vuely-Laravel-Passport
  • Vuely ExpressJs
    • Folder Structure
    • Installation
    • Layouts
    • Style Customization
    • Deployment
    • Translate the App
    • Browsers Compatibilty
    • Credits
  • Vuely Angular Version
    • Folder Structure
    • Installation
    • Layouts
    • Adding/Deleting Menu & Component
    • RTL
    • Deployment
  • Credits
  • Template Update
  • FAQ's (Frequently Asked Questions)
  • Changelog
  • Customer Support
Powered by GitBook
On this page
  • Integrate New Widget
  • Integrate New Component/Page
  • For seed project:
  • For complete template:
  • Integrating Menu
  1. Vuely VueJs

Build an App from Scratch

Please follow the below documentation to learn how you can build an app from the scratch.

PreviousStyle CustomizationNextSeed Project

Last updated 6 years ago

You can easily build your app from scratch, just follow the steps given below:

  1. Copy the project files from the downloaded ThemeForest project.

  2. Open terminal and go to the root directory and then run npm install.

  3. After installing npm then run npm run serve.

  4. Open your browser and access

Integrate New Widget

Please follow the section to learn how to add new widgets in the template.

Integrate New Component/Page

For seed project:

If you want to add some pre-made components or pages then follow below steps:

  1. Copy the page template from vuely/src/views/downloaded ThemeForest files and paste it into under the your-app-directory/src/view/ directory.

  2. Now you need to define the route in the your-app-directory/src/router/default.js file.

    index.js
    // layout component
    import Full from '../container/Full'
    
    // dashboard components 
    const DashboardOne = () => import('../views/dashboard/DashboardOne');
    
    export default [ 
       { 
          path: '/', 
          component: Full, 
          redirect: '/default/dashboard/dashboard-v1', 
          children: [ 
             { 
                path:'/default/dashboard/dashboard-v1', 
                component: DashboardOne, 
                meta: { 
                   title: 'message.dashboardv1',
                   breadcrumb: 'Dashboard / DashboardV1' 
                } 
             }
          ]
       }
    ]
  3. That’s it if you navigate The page has been build successfully.

If you want to add some new components by your own, then follow the steps mentioned below:

For complete template:

If you are using the complete template then you are able to add only new components or pages & for that you have to follow the below mentioned steps:

Integrating Menu

Please check this section to get detailed information on this.

Please check this section to get detailed information on this.

If you want to add menu items then please check this section for the detailed information.

http://localhost:8080
Adding New Widgets
http://localhost:8080/dashboard/dashboard-v1/
Adding New Component
Adding New Component
Adding Menu In Different Layouts