/vue-element-ui-boilerplate

Vue.js with Element UI boilerplate with the ability to create custom layouts for different routes

Primary LanguageVue

vue-element-ui-boilerplate

Packed With:

  • Vue-Router
  • Vuex
  • Element UI
  • Node-Scss

define a new layout

  1. create file at src/layouts such as:
<template>
  <div class="my-custom-layout">
    <slot /> <!-- this will render everything here -->
  </div>
</template>

<script>
export default {
  name: 'my-custom-layout'
}
</script>

<style lang="scss" scoped>

</style>
  1. go to src/router/index.js
  2. add the following to any route to use the newly created layout:
meta: {
    layout: 'my-layout'
}
  1. go to src/main.js and add the following:
import MyCustomLayout from "./layouts/MyCustomLayout.vue";

Vue.component(`${MyCustomLayout.name}-layout`, MyCustomLayout); // you have to add `-layout` in the end
example:
{
    path: "/",
    name: "Home",
    meta: {
      layout: "with-sidebar"
    },
    component: Home
},

Note: if you didn't specify the layout the src/layouts/default.vue will be used instead

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint