How to Create Smart Layouts for Vue.js Project

How to Create Smart Layouts for Vue.js Project

In this Vue tricks article I decided to show you tricks how to create smart layouts for VueJS project.

Hi VueJS lovers!

Today, I’d like to talk with you about layouts system for your VueJS application. My friend Philipp was asking me how to add different layouts for his bakery application. After hours of googling, he found some interesting tricks and asking me what I’m thinking about VueJS layouts. In this article I decided to share my mind about this topic and show you tricks how to create smart layouts for VueJS project.

But before we start, ask yourself one question:

Image for post

“What’s wrong with current VueJS layouts?”

The answer is simple:

Image for post

“They do not exist”

How VueJS developers usually solve this problem? The most common approach is creating higher order component and add it to all pages.

<template>
  <MyLayout>
    <h1>Here is my page content</h1>
  </MyLayout>
</template>

<script>
import MyLayout from '@/layouts/MyLayout.vue'

export default {
  name: 'MyPage',
  components: { MyLayout }
}
</script>

Higher order component example

I see the couple of problems with that approach:

  1. We should import our layouts over and over on different pages.
  2. We should wrap our content with that layout components.
  3. It makes our code a bit more complicated and force components be responsible to render layouts.

On one hand it shouldn’t be a big deal, but I’m impressed with NuxtJS approach to add layouts and want to create something similar. If you are not familiar with NuxtJS way, I can say two words: “It’s amazing”. You can define your layout as a component’s property and you shouldn’t add higher order components to add layouts into your application. But let’s forget NuxtJS for now and look what can we do with layouts in VueJS.

Prerequisite

Let’s start and create a new vue project with Vue CLI https://cli.vuejs.org/

vue create vue-layouts

Feel free to choose between Vue2+ and Vue3+.

Cleaning up the project

We should clean our project and remove unused file created by vue cli.

First of all, remove HelloWorld.vue component and components folder. In this project it won’t be needed. In Home.vue we should remove import to HelloWorld.vue component.

Remove assets folder with content and create a new file views/Contacts.vue.

After removing unused files our projects is looking like:

--src
----views
------About.vue
------Contacts.vue
------Home.vue
----App.vue
----main.js
----router.js
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contacts">Contacts</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

App.vue

<template>
  <div>
    <h1>This is a home page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

views/About.vue

<template>
  <div>
    <h1>This is a contacts page</h1>
  </div>
</template>

<script>
export default {
  name: "Contacts"
}
</script>

views/Contacts.vue

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/contacts',
    name: 'Contacts',
    component: () => import('@/views/Contacts.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

router.js

Now we’re ready to create our layouts.

javascript programming vue web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Learn VUE 3 by Making a Web App ~ Composition API, Vue JS Hooks?

Learn how the new Vue JS 3 works by making a simple and easy web application to increment and decrement a numerical value using the Composition API, including Vue Ref, Vue Reactive and Vue Computed.