Is there any possibility to implement layouts?

[d0whc3r]

Something like svelte routify, for example: https://www.youtube.com/watch?v=gYMNfcXPwrQ With _layout and _reset or other approach like multiple _layouts one for each folder

[brattonross]

Hey @d0whc3r, thanks for your interest!

Yes, I think adding layouts as a feature is a good idea 😄 A solution similar to Routify's seems like a sensible choice, I'm going to have a think about how this could be implemented

[brattonross]

Layouts are in a sense already a feature, as you can create a layout for a subset of pages by using the nested routes feature like so:

pages/
  users.vue <-- this component becomes the layout
  users/
    index.vue

As I see it the problem that is to be solved is that we can't currently "reset" layouts. i.e. if I have a structure like this:

pages/
  users.vue
  users/
    index.vue
    settings/
      index.vue

Then my pages under the settings directory will always have to use the users layout.

To solve this, we have to hoist route definitions up to the top level so that they are only children of their given layout. To signal that a specific directory and its sub-directories should undergo hoisting, we can mark it with a layout file as suggested:

pages/
  users.vue
  users/
    index.vue
    settings/
      _layout.vue
      index.vue

This would then result in something like the following routes:

[
  {
    path: '/users',
    component: '/pages/users.vue',
    children: [
      {
        name: 'users',
        path: '',
        component: '/pages/users/index.vue'
      }
    ]
  },
  {
    path: '/users/settings',
    component: '/pages/users/settings/_layout.vue',
    children: [
      {
        name: 'users-settings',
        path: '',
        component: '/pages/users/settings/index.vue'
      }
    ]
  }
]

[brattonross]

I think I prefer to have the layout file named something like {layout}.vue rather than _layout.vue as it would be closer to the syntax for dynamic routes. Also perhaps the "reset" layout file should be in the parent directory to match the current way of creating layouts, like so:

pages/
  users.vue
  users/
    index.vue
    {settings}.vue
    settings/
      index.vue

[intrnl]

Would be nice if we can set a layout in the base pages directory :+1:

[stafyniaksacha]

Hello !

You can easily create layouts components using slots: src/layouts/DefaultLayout.vue

<template inherit-attrs="false">
  <Navbar />

  <slot></slot>

  <Footer />
</template>

note: if you are using vite-plugin-components you have to add src/layouts directory to the plugin option:

import { UserConfig } from 'vite'
import Voie from 'vite-plugin-voie'
import Components from 'vite-plugin-components'

const config: UserConfig = {
  plugins: [
    Voie(),
    Components({
      dirs: ['src/components', 'src/layouts'],
    })
  ]
}

And use them in your pages: src/pages/index.vue

<template>
  <DefaultLayout>
    <h1>Awesome Website</h1>
  </DefaultLayout>
</template>

[mariusa]

Now I'm using https://github.com/ktsn/vue-router-layout which works great, but no vue3 support. What do you think about it?

[Fanna1119]

https://github.com/JohnCampionJr/vite-plugin-vue-layouts