Have you ever had different layouts depending on your content?

Let me explain, let’s say you create a blog. You want the home & about page not to have a sidebar, but all the other pages to have one. You see the idea?

In itself, it’s not complicated you will tell me, just create a sidebar component and import it into every page component where you need it.

Okay, but it still sucks to import this sidebar all the time and write it down, right? What if there’s an easier way? Indicate it in the router for example?

Here’s how to use route-view to create a multiple layout system

First of all, why do it with Vue-router?

The router is where we define the pages of our site, so why not specify which layout we want per page in it?

Let’s start by creating our project with vue-cli 3.

Let’s create our layouts first. It will be components with no logic, just HTML / CSS that accepts a slot, the content to inject.

(I used bulma CSS).