Open d0whc3r opened 4 years ago
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
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'
}
]
}
]
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
Would be nice if we can set a layout in the base pages directory :+1:
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 addsrc/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>
Now I'm using https://github.com/ktsn/vue-router-layout which works great, but no vue3 support. What do you think about it?
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