npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@madogai/vite-plugin-vue-layouts

v0.8.1

Published

Router based layout plugin for Vite and Vue

Downloads

8

Readme

vite-plugin-vue-layouts

npm version

Router based layout for Vue 3 applications using Vite

Overview

This works best along with the vite-plugin-pages.

Layouts are stored in the /src/layouts folder by default and are standard Vue components with a <router-view></router-view> in the template.

Pages without a layout specified use default.vue for their layout.

You can use route blocks to allow each page to determine its layout. The block below in a page will look for /src/layouts/users.vue for its layout.

See the Vitesse starter template for a working example.

<route lang="yaml">
meta:
  layout: users
</route>

Getting Started

Install Layouts:

$ npm install -D vite-plugin-vue-layouts

Add to your vite.config.js:

import Vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';

export default {
  plugins: [Vue(), Pages(), Layouts()],
};

In main.ts, you need to add a few lines to import the generated code and setup the layouts.

import { createRouter } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'

const routes = setupLayouts(generatedRoutes)

const router = createRouter({
  // ...
  routes,
});

Client Types

If you want type definition of virtual:generated-layouts, add vite-plugin-vue-layouts/client to compilerOptions.types of your tsconfig:

{
  "compilerOptions": {
    "types": ["vite-plugin-vue-layouts/client"]
  }
}

Configuration

interface UserOptions {
  layoutsDirs?: string | string[]
  exclude: string[]
  defaultLayout?: string
}

Using configuration

To use custom configuration, pass your options to Layouts when instantiating the plugin:

// vite.config.js
import Layouts from 'vite-plugin-vue-layouts';

export default {
  plugins: [
    Layouts({
      layoutsDirs: 'src/mylayouts',
      defaultLayout: 'myDefault'
    }),
  ],
};

layoutsDirs

Relative path to the layouts directory. Supports globs. All .vue files in this folder are imported async into the generated code.

Can also be an array of layout dirs

Any files named __*__.vue will be excluded, and you can specify any additional exclusions with the exclude option

Default: 'src/layouts'

How it works

setupLayouts transforms the original router by

  1. Replacing every page with its specified layout
  2. Appending the original page in the children property.

Simply put, layouts are nested routes with the same path.

Before:

router: [ page1, page2, page3 ]

After setupLayouts():

router: [
  layoutA: page1,
  layoutB: page2,
  layoutA: page3,
]

That means you have the full flexibility of the vue-router API at your disposal.

Common patterns

Transitions

Layouts and Transitions work as expected and explained in the vue-router docs only as long as Component changes on each route. So if you want a transition between pages with the same layout and a different layout, you have to mutate :key on <component> (for a detailed example, see the vue docs about transitions between elements).

App.vue

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="slide">
      <component :is="Component" :key="route" />
    </transition>
  </router-view>
</template>

Now Vue will always trigger a transition if you change the route.

Data from layout to page

If you want to send data down from the layout to the page, use props

<router-view foo="bar" />

Set static data at the page

If you want to set state in your page and do something with it in your layout, add additional properties to a route's meta property. Doing so only works if you know the state at build-time.

You can use the <route> block if you work with vite-plugin-pages.

In page.vue:

<template><div>Content</div></template>
<route lang="yaml">
meta:
  layout: default
  bgColor: yellow
</route>

Now you can read bgColor in layout.vue:

<script setup>
import { useRouter } from 'vue-router'
</script>
<template>
  <div :style="`background: ${useRouter().currentRoute.value.meta.bgColor};`">
    <router-view />
  </div>
</template>

Data dynamically from page to layout

If you need to set bgColor dynamically at run-time, you can use custom events.

Emit the event in page.vue:

<script setup>
import { defineEmit } from 'vue'
const emit = defineEmit(['setColor'])

if (2 + 2 === 4)
  emit('setColor', 'green')
else
  emit('setColor', 'red')
</script>

Listen for setColor custom-event in layout.vue:

<script setup>
import { ref } from 'vue'

const bgColor = ref('yellow')
const setBg = (color) => {
  bgColor.value = color
}
</script>

<template>
  <main :style="`background: ${bgColor};`">
    <router-view @set-color="setBg" />
  </main>
</template>

ClientSideLayout

The clientSideLayout uses a simpler virtual file + glob import scheme, This means that its hmr is faster and more accurate, but also more limited

Usage

// vite.config.js
import { ClientSideLayout } from 'vite-plugin-vue-layouts'

export default {
  plugins: [
    ClientSideLayout({
      layoutsDir: 'src/mylayouts', // default to 'src/layout'
      defaultLayout: 'myDefault', // default to 'default', no need '.vue'
      importMode: 'sync' // The default will automatically detect -> ssg is sync,other is async
    }),
  ],
};