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.
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
npm run dev
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
Now install Vuex using
npm install --save vuex
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.
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
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
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
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
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
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
This simply mount the MyComponent in the root.
main.js there is one thing left to do, import and use your store there
This is the entry point your application and now your store is registered.
Save all the files and check your browser
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