Multiple Layouts for VueJS Single Page Apps

It is a common thing that even a Single Page App needs Multiple Layouts to display views. Such as a Login Page may not require unnecessary toolbars etc….

Today I’'m gonna tell you how I overcome this with VueJS. For this tutorial I assume you have knowledge on VueJS, VueRouter and Vuex . We are going to use VuetifyJS for style our application and for easy setup. You can use any other style guide with this method.

Lets Start

First install vue-cli and start a fresh SPA project with it using Vuetify Template.

For non vuetify projects, the procedure is same.

npm install -g vue-cli
vue init vuetifyjs/webpack my-project
cd my-project
npm install
npm run dev
Install and configure vue application with vue-cli

These commands will start the webpack development server on your machine.For simplicity we ignore setting up testing part.

Now you will see this on your browser

Default Application Created with Vuetify Template

Now install Vuex using

npm install --save vuex

Dynamic Components

VueJS is awesome. It has almost everything you need. For our task we targets using dynamic components.

VueJS allows you to switch between components dynamically using same element.

Your Layouts

Before start we need to have some layouts. We are going to create two of them.

  • Simple : A simple layout as it’s name implies
  • App : Application layout with some fancy sidebar and a toolbar

Go ahead and create a folder src/layouts and add those two files in it

src/layouts/SimpleLayout.vue
src/layouts/AppLayout.vue (It may look complex, but its up to you put router-view where you want)

So in both files you can see I’ve put a <router-view></router-view> element. This is used by VueRouter to display a router view on the application.

Now we have two different layouts. For example to display a login page SimpleLayout can be used.

Keep application state with Vuex

As our application will be complex we will use Vuex here to keep the state of the application.

Create src/store/index.js and add followings in it

Put this file as src/store/index.js

This is a very simple Vuex Store that used to store state of the application. Here you can see there is a state variable for layout and it’s set to simple-layout. This is the name of the layout, we will define it soon in our application.

We have set a mutation called SET_LAYOUT for change the state of the layout state. As you know in Vuex only way to change a state is a commit using a mutation.

Also we have defined a getter called layout to get the state out of this variable.

Show your layouts

Now you need a way to show your layouts as you want. We have two of them and we now also have a Vuex store to keep track of current layout in the application.

For this open src/App.vue and put the following

src/App.vue

In here we have imported our layouts and put them under components section in the script. We also have given a name for each component. As you can see in store we have used simple-layout as default and it refers to the component here.

We have a computed property also called layout. This computed property getting it’s value from the vuex store.

As computed property changes are causing UI updates, when the value in store changes it will also do necessary UI updates in this component.

Most important one here is the

<component v-bind:is="layout"></component>

This is a dynamic component from vue. It binds to a component in runtime and switch between components using the same element.

As you can see it was bounded to the layout computed property. So once store updates it’s value it will be also passed to v-bind:is . Now this will bind the passed component inside the tags.

Time to test

It’s time to test our application. Before that we need a Testing component. Go to src/components and create a new file called MyComponent.vue and add following simple content

src/components/MyComponent.vue

In the following simple file we have created two buttons to switch between layouts and a method called setLayout for change the layout.

setLayout is a simple method that do a commit to store changing the layout value on store.

As we know this will trigger computed property in App.vue to change its layout value in dynamic component

Finally open your router/index.js and import this component like this

Sample router file src/router/index.js

This simply mount the MyComponent in the root.

In your main.js there is one thing left to do, import and use your store there

src/main.js

This is the entry point your application and now your store is registered.

Save all the files and check your browser

Working Application

Conclusion

Here I’ve given you a full application implementation using VuetifyJS and using Vuex. Vuex was used to show you how to use this technique application wide, so you can change your layouts any where and anytime in your application.

Besides the concept is simple. Its all dynamic components. That’s all. When coupled with Vuex we can craft the dream app we want with as many as layouts not limiting to default one.

Now you can make your SPA application with multiple layouts same time

You can get code here