Skip to content
This repository has been archived by the owner on Sep 14, 2024. It is now read-only.

Is there any possibility to implement layouts? #1

Open
d0whc3r opened this issue Aug 10, 2020 · 7 comments
Open

Is there any possibility to implement layouts? #1

d0whc3r opened this issue Aug 10, 2020 · 7 comments
Labels
enhancement New feature or request

Comments

@d0whc3r
Copy link

d0whc3r commented Aug 10, 2020

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
Copy link
Owner

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 brattonross added the enhancement New feature or request label Aug 10, 2020
@brattonross
Copy link
Owner

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
Copy link
Owner

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
Copy link

intrnl commented Aug 17, 2020

Would be nice if we can set a layout in the base pages directory 👍

@stafyniaksacha
Copy link

stafyniaksacha commented Dec 30, 2020

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
Copy link

mariusa commented Mar 16, 2021

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants