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
  1. Vuely VueJs

Adding New Widgets

Vuely provides you the ability to add new widgets in the template. Please check the detailed documentation to learn, how to add the new widgets in the template.

Adding a new widget:

Please follow the given steps to add a new widget in the template. We are taking an example of adding a ToDo list on the dashboard but you can add any widget on any of the other page in the template:

If you are working on the seed project, then you need to follow all the given steps, otherwise you can directly start from the step 3.

  1. Open src/views/dashboard/DashboardOne.vue file.

  2. Copy TodoList.vue widget from vuely/src/components/Widgets/ToDoList.vue ThemeForest downloaded files and paste it under the your-project-directory-name/src/components/Widgets/ directory.

  3. Import TodoList widget into the DashboardOne.vue . Example:

    DashboardOne.vue
    <template>
        <v-container fluid px-4 py-0>
           <TodoList />
        </v-container>
    </template>
    
    <script>
    import TodoList from "Components/Widgets/ToDoList";
    
    export default {
      components: {
        TodoList
      }
    }
    </script>
  4. Save the file and open your browser you will see your dashboard is ready with the newly added widget i.e. a ToDo list in the given example.

PreviousTranslate The App(Multi Language Support)NextThemes

Last updated 5 years ago