Extend a default layout or create custom layouts in your SPA application Vue.js
You no longer need to issue events or use vuex to hide the components of basic layout on certain routes of your application.
I developed a plugin a few days ago called (vue-extend-layout), I did it because really occurred this need in a post in the group Vue.js Brazil that made me realize how interesting would be the possibility of determining a layout model in the pages that does not really need the appearance of the default layout of the application.
Those who use the Nuxt Framework to create applications with Server Side Rendering (SSR) know that Nuxt’s default framework allows you to expand layouts and set the layout you want to use on the page. This approach pleased me a lot and I missed it when I used a vue-cli template.
vue-extend-layout is inspired by this structure of Nuxt, is very simple to configure in an application already under development and without compromising what was being done.
Thinking also of those who are starting a new project and want to use a vue-cli template with the vue-extend-layout already pre-configured, I have developed 2 templates, both based on webpack (webpack and webpack-simple):
Using the plugin vue-extend-layout
First we need to install the plugin via NPM.
npm install --save vue-extend-layout
The normal thing about a SPA Vuejs is to have a base file to use throughout the application, this file is the
App.vue, however, using the layout system we will change it from directory and rename it to
default.vue, this is the name of the default layout that will be used from now on.
Another important thing is to modify the name of the component to ‘default’,
In the next step you will create a directory called
layouts/ in your default application directory, it is usually
src/, and you just need to move the file that has been renamed in this directory, thus
src/layouts/default.vue. Test your application and see that apparently everything is the same and working, the configuration was simple, now you are using the default layout for the entire application and have the possibility to create new layouts, I will show below how to do this.
Creating custom layouts and defining on certain routes
To create a layout, you simply create a vue file component within the layouts directory and set the name of the component with the ID you want to call that layout. For example:
In your route file you use the meta object to tell the vuejs which layout to use for
the login page and ✨ ✨ .
A caveat with the Webpack
In your webpack file check for an alias (@) in the main directory of your application, usually using vue-cli we find something like this.
vue-extended-layout use this alias(@), if you do not have one or the main path is another, add that alias (@) to the path containing the directory
layouts/ you have created.
So that’s it, any question or problem when using it opens a issue there in the repositório that I’ll try to solve as quickly as possible, do not forget the vue-cli templates preconfigured with vue-extend-layouts for those who are starting a new project, as they avoid making the settings for this post.
And be sure to join the Vue.js Brasil no Facebook, there are many good people there helping and contributing to the community, I am also there, see you in an upcoming article, hug.
Build highly engaging Vue JS apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config…bit.ly