chore: add simpler example with unplugin-vue-router

JohnCampionJr · Dec 16, 2023 · cae7638 · cae7638
1 parent 5542aa7
commit cae7638
Show file tree

Hide file tree

Showing 27 changed files with 435 additions and 0 deletions.
diff --git a/examples/unplugin-vue-router/index.html b/examples/unplugin-vue-router/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/examples/unplugin-vue-router/package.json b/examples/unplugin-vue-router/package.json
@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nodemon --watch ../../dist/index.js -x \"cross-env DEBUG=vite-plugin-layouts vite\"",
+    "build": "cross-env DEBUG=vite-plugin-layouts vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.3.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vue/compiler-sfc": "^3.3.8",
+    "cross-env": "^7.0.3",
+    "nodemon": "^3.0.1",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
+    "vite-plugin-inspect": "^0.8.1",
+    "vite-plugin-pages": "^0.32.0",
+    "vite-plugin-vue-layouts": "workspace:*",
+    "unplugin-vue-markdown": "^0.25.2",
+    "unplugin-vue-router": "^0.7.0"
+  }
+}
diff --git a/examples/unplugin-vue-router/src/App.vue b/examples/unplugin-vue-router/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/examples/unplugin-vue-router/src/index.css b/examples/unplugin-vue-router/src/index.css
@@ -0,0 +1 @@
+.test {    }
diff --git a/examples/unplugin-vue-router/src/layouts/default.vue b/examples/unplugin-vue-router/src/layouts/default.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Default Layout
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/unplugin-vue-router/src/layouts/second.vue b/examples/unplugin-vue-router/src/layouts/second.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Second Layout
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/unplugin-vue-router/src/layouts/sub/layoutsub.vue b/examples/unplugin-vue-router/src/layouts/sub/layoutsub.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Layout Sub Folder
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/unplugin-vue-router/src/main.ts b/examples/unplugin-vue-router/src/main.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts'
+import App from './App.vue'
+import './index.css'
+
+const router = createRouter({
+  history: createWebHistory(),
+  extendRoutes: routes => setupLayouts(routes),
+})
+
+const getRoutes = createGetRoutes(router)
+console.log(getRoutes())
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git a/examples/unplugin-vue-router/src/module1/layouts/module1layout.vue b/examples/unplugin-vue-router/src/module1/layouts/module1layout.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Module 1 Layout
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/unplugin-vue-router/src/module2/layouts/module2layout.vue b/examples/unplugin-vue-router/src/module2/layouts/module2layout.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Module 2 Layout
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/unplugin-vue-router/src/pages/about/index.vue b/examples/unplugin-vue-router/src/pages/about/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <p>/about/index.vue</p>
+  <router-link to="/about/who/me">
+    me
+  </router-link>
+</template>
diff --git a/examples/unplugin-vue-router/src/pages/about/who/me.vue b/examples/unplugin-vue-router/src/pages/about/who/me.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>meeeeee</p>
+</template>
+
+<route>
+{
+  name: "who-me-override",
+  meta: {
+    requiresAuth: false
+  }
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/deep/deeper/deepest/index.vue b/examples/unplugin-vue-router/src/pages/deep/deeper/deepest/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Deepest Sub folder page with no layout set, should use default</div>
+</template>
diff --git a/examples/unplugin-vue-router/src/pages/deep/deeper/index.vue b/examples/unplugin-vue-router/src/pages/deep/deeper/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Deeper Sub folder page with no layout set, should use default
+    <p><router-link to="/deep/deeper/deepest">Go Deepest</router-link></p>
+  </div>
+</template>
diff --git a/examples/unplugin-vue-router/src/pages/deep/index.vue b/examples/unplugin-vue-router/src/pages/deep/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Sub folder page with no layout set, should use default
+    <p><router-link to="/deep/deeper">Go Deeper</router-link></p>
+  </div>
+</template>
diff --git a/examples/unplugin-vue-router/src/pages/index.vue b/examples/unplugin-vue-router/src/pages/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <p>index.vue</p>
+    <router-link to="/about"> about </router-link>
+    <p>
+      <router-link to="/news"> news </router-link> |
+      <router-link :to="{ name: 'named-news-page' }">
+        today's news
+      </router-link>
+    </p>
+    <p>
+      <router-link to="/sublayout"> sub layout </router-link>
+    </p>
+    <p>
+      <router-link to="/nolayout"> no layout </router-link>
+    </p>
+    <p>
+      <router-link to="/module1"> module 1 layout </router-link>
+    </p>
+    <p>
+      <router-link to="/module2"> module 2 layout </router-link>
+    </p>
+    <p>
+      <router-link to="/second"> second level layout </router-link>
+    </p>
+    <p>
+      <router-link to="/deep">
+        deep sub folder with no layout specified
+      </router-link>
+    </p>
+  </div>
+</template>
+
+<route>
+{
+  name: "name-override",
+  meta: {requiresAuth: false}
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/module1.vue b/examples/unplugin-vue-router/src/pages/module1.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>Module 1 Content</div>
+</template>
+<route>
+{
+  meta: {
+    layout: "module1layout"
+  }
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/module2.vue b/examples/unplugin-vue-router/src/pages/module2.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>Module 2 Content</div>
+</template>
+<route>
+{
+  meta: {
+    layout: "module2layout"
+  }
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/news.vue b/examples/unplugin-vue-router/src/pages/news.vue
@@ -0,0 +1,10 @@
+<template>
+  <router-view />
+</template>
+<route>
+{
+  meta: {
+    layout: "second"
+  }
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/news/Today.vue b/examples/unplugin-vue-router/src/pages/news/Today.vue
@@ -0,0 +1,8 @@
+<template>
+  <p>/news/today.vue</p>
+</template>
+<route>
+{
+  name: 'named-news-page'
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/news/index.vue b/examples/unplugin-vue-router/src/pages/news/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <p>/news/index.vue</p>
+</template>
diff --git a/examples/unplugin-vue-router/src/pages/nolayout.vue b/examples/unplugin-vue-router/src/pages/nolayout.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>nolayout</p>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: false
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/second/index.vue b/examples/unplugin-vue-router/src/pages/second/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Second level layout.
+    <router-view />
+  </div>
+</template>
+<route>
+{
+  meta: {
+    layout: "second"
+  }
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/pages/sublayout.vue b/examples/unplugin-vue-router/src/pages/sublayout.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <p>sublayout</p>
+  </div>
+</template>
+
+<route>
+{meta: {
+  layout: "sub/layoutsub"
+}
+}
+</route>
diff --git a/examples/unplugin-vue-router/src/shims-vue.d.ts b/examples/unplugin-vue-router/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}