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.

Last updated