Does Vue has an official layout system?

Hello,

Does Vue has an official layout system? I mean something like master page.
I couldn’t find anything. Please give me a link If there is this layout system.

regard,

Saeed

1 Like

I’m not sure what master page is, but the short answer is no. Vue has no opinion on how you design your app.

You might find what you’re looking for from a 3rd party: https://github.com/vuejs/awesome-vue

To me it sounds like you’re looking for Vue Router. With that you can define the layout in one Vue component, and the content of other pages in other Vue components.

The short answer is no. Vue can easily be added into other projects and tools that use such things.

The better answer is no, but you might want to look at NUXT.

NUXT is an extension on top of Vue. It builds a project using view components by examining files you put in specific folder. One of the specific folders they use is “Layouts” where you build something that is like a master page.

Don’t be put off by thinking that NUXT needs to be deployed on a Node server. You can configure projects to be statically generated SPA style and use ANY hosting.

Their documentation is excellent.

I’m not sure that I understand you correclty but if you need something to simplify your markup look at https://bootstrap-vue.org/ or Vuetify — A Material Design Framework for Vue.js

If by layout system you mean for example; You have a nav and footer component and you want it to show up on certain pages, I will say “Yes and No”
No: I mean it is not out of the box like when you are using Nuxt that provides an easy system of defining and applying layouts.

Yes: Vue provides a solution that has to be configured usig Vue router
The solution is to use Named views when using vue-router.

  1. In your app.vue, instead of having one <router-view /> tag, you will have multiple based on your needs and they will have different names.
  <router-view name="nav" :pageConfig="pageConfig" />
  <router-view name="auth" />
  <router-view v-if="config" class="default-route mt-16 lg:ml-56" @pageConfig="setPageConfig" />

As you ca see, I have three (3) router-views and two (2) of them have names will the one without a name is the default.

  1. In your router/index.js while you are cnfiguring routes, you can now choose which <router-view /> that will be rendered and what components will be rendered .
  • You have to use the components which expects an object instead of the singular component when attaching cmponents to a route.
import { createRouter, createWebHistory } from 'vue-router'
import Navbar from '../components/Navbar.vue'
import Dashboard from '../views/Dashboard.vue'
import About from '../views/About.vue'
import Login from '../views/login.vue'


const routes = [
  { 
    path: '/', 
    name: 'dashboard', 
    components: {
      default: Dashboard,
      nav: Navbar 
    },
  },
{ 
    path: '/about', 
    name: 'dashboard', 
    components: {
      default: About,
      nav: Navbar 
    },
  },
{ 
   path: '/login', 
   name: 'Login', 
   components: { 
     auth: Login  
 }  
},
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

As you can see, the when you go to the route '/', theboth the dashboard.vue and the nav.vue will be redenderd to their respective <router-view />. The dashboard will take the default. It is the same situation for the '/about' route.
However, The '/login' route will only render the Login.vue without the nav

PS: This works with vue-router
Documentation Link: Vue router named routes

Alternatively, you can use Nuxt to remove all this setup hassle

1 Like