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.

The Plugin 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

In your src/main.js:

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’, name: 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: layouts/login.vue

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.

The 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.

Recommended courses: