Adding new components
You can add new components by adding a new folder in src/components
For example, src/components/MyComp
Then create there a new file named MyComp.vue with the component code.
For example,
<template>
<div>...</div>
</template>
<script>
export default {
...
}
</script>
<styles>
...
</styles>
Adding new routes
If the component is associated to a route you need to create the component under the 'views' folder.
For a view component you will use a template structure like this:
<template>
<ContentWrapper>
... view content here
</ContentWrapper>
</template>
You will need now to make the new component accessible to the application by adding a route that loads the component. To do that open routes.js and import the component and add a new route entry following the required structure by Vue Router
import MyComp from '@/views/MyComp/MyComp.vue';
...
export default new Router({
...
routes: [
...
{
path: '/mycomp',
component: Mycomp
},
...
Check other routes in the project to see where to add the route entry correctly.
Finally, you need to add an entry in order to provide a link for the new route created.
To do that, add in src/menu.js a new menu entry with the information for your menu.
Example
const Menu = [
/* heading elements */
{
// text to show
heading: 'Heading Text',
// translation key
translate: 'sidebar.heading.KEY'
},
/* menu items elements */
{
// text to show
name: 'Item Text',
// class name to show icon
icon: 'icon-class',
// route path (not used on items with submenu)
path: 'routepath',
// translation key
translate: 'sidebar.item.KEY',
// shows a Badge right next to the text
label: { value: 10, color: 'success' },
// list of submenu items
submenu: [{
... Same format as menu items
}
}
...
Vendor assets
Vendor assets can be installed using the Node Package Manager (npm). The following command shows how to install a package so it becomes part of the project
npm install package-name --save
If you don't add the --save flag, the package won't be saved as a dependecy in package.json and it will be only available in your local project.
Once the command ends, files will be available in the node_modules folder and ready to be imported into your application code.
If the package is used globally you can import files using the file Vendor.js
To use a package locally in your new component, you can import the files directly into the code in your component file.
Layout classes
Layout can be changed via the following classed applied to the body tag:
| Class name |
Description |
.layout-fixed |
Makes navbars become fixed while the user can scroll only content |
.layout-boxed |
Limits the width of the main wrapper element |
.aside-collapsed |
Condenses the sidebar showing only icons |
.aside-collapsed-text |
Condenses the sidebar showing icons and Text |
.aside-toggle |
used internally for mobiles to hide the sidebar off screen |
.offsidebar-open |
used internally to display the offsidebar component (formally the right sidebar) |
Translation
The translation system uses the i18next module.
The file src/i18n.js contains the setup for the module and what it does is to load the translations files located under folder public/locales
This modules simplifies the translation system by loading translate references from a JSON file and replacing the content where the reference has been used.
Example
<small>{{$t("dashboard.WELCOME")}}</small>
Where the i18key values corresponds to an entry in each json file according the current language selected.
To use the horizontal menu in a route, you need to declare that route as a child of the the LayoutHorizontal component, like this
{
path: '/',
component: LayoutHorizontal,
children: [
// Dashboard
{
path: '/dashboardh',
component: DashboardH
}
]
},
The menu of the horizontal header is declared in file src/components/Layout/HeaderHorizontal.vue and is limited to a few entries for demo purposes only.
RTL
RTL is based on rtlcss plugin using a custom postcss plugin that allows to change the application styles into an RTL representation.
To enable RTL open the file .postcssrc.js and uncommment the line that uses the rtlcss-plugin, like this:
module.exports = {
plugins: {
autoprefixer: {},
// Uncomment this line to enable RTL
[postcssRtlcssPlugin]: {}
}
}
The plugin is defined in file postcss-rtlcss-plugin.js and it simply passes the styles content through the rtlcss parser.
Seed Project
This project is an application skeleton. You can use it to quickly bootstrap your VUE projects and dev environment for these projects. The seed app doesn't do much and has most of the feature removed so you can add them as per your needs just following the full-features version as example.
This project is provided in order to start with the template using a different approach. Usually, templates will come with all features working and you need to remove them one by one in the way you don't need them.
With the seed project you can start adding custom features and others from the full project to make grow your app.
Since the files and structure is the same for the full and seed versions, you can save time using comparison tools that allows to apply changes from full features project into the seed project.
jQuery and Wrapper script
Starting from version 4.1, this template doesn't need jQuery as a mandatory dependency for core files, this means it is only required when using jQuery based plugins for some features included.
Seed project versions no more include jQuery by default..
The wrapper.js (~ 7k minified) is a new script introduced to emulate some specific jQuery functions used in the template. This made possible to significantly cut the refactoring changes in the code, keeping it readable in a jQuery way and avoiding extra bytes, mainly when loops are repeatedly used to work with multiple elements.
Important The Wrapper script is NOT a replacement for jQuery. All methods were designed for an adequate and specific use and they don't do a deep validation on the arguments provided. It's suggested NOT to use this library extensively. Instead, use pure JS or you might even need jQuery.