ktsn / vue-router-layout Goto Github PK

View Code? Open in Web Editor NEW

127.0 3.0 16.0 1.55 MB

Lightweight layout resolver for Vue Router

License: MIT License

JavaScript 15.79% TypeScript 84.21%

vuejs vue-router layout component

vue-router-layout's Issues

feature request: please support vue-class-component

Please add .d.ts which extends vue-class-componet ComponentOptions to support writing code like this example.

@Component({
  layout: "testlayout",
})
export default class Test extends Vue {

[Feature Request/Question] Support of Composition API and <script setup>

Is there currently any support (planned) for Vue 3's Composition API or/and the <script setup> to specify which layout to load?

One could use a second <script> tag with the <script setup> but it looks ugly for a single option https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script

ESM Builder Compatibility

I am using Vue CLI and would like to generate the app as an EMS module, however after connecting and configuring
vue-router-layout i am getting error:

ReferenceError: importScripts is not defined
    i main.mjs:1
    e main.mjs:1
    e main.mjs:1
    e main.mjs:1
    index index.js:2
    extractComponentsGuards vue-router.esm-bundler.js:2010
    navigate vue-router.esm-bundler.js:3089
    promise callback*navigate vue-router.esm-bundler.js:3084
    pushWithRedirect vue-router.esm-bundler.js:2979
    push vue-router.esm-bundler.js:2915
    install vue-router.esm-bundler.js:3329
    use runtime-core.esm-bundler.js:3808
    <anonymous> main.js:22
    433 main.mjs:1
    __webpack_require__ main.mjs:1
    <anonymous> main.mjs:1
[vue-router.esm-bundler.js:3248](webpack://website/node_modules/vue-router/dist/vue-router.esm-bundler.js?ec2d)
[Vue Router warn]: Unexpected error when starting the router: ReferenceError: importScripts is not defined
    i main.mjs:1
    e main.mjs:1
    e main.mjs:1
    e main.mjs:1
    index index.js:2
    extractComponentsGuards vue-router.esm-bundler.js:2010
    navigate vue-router.esm-bundler.js:3089
    promise callback*navigate vue-router.esm-bundler.js:3084
    pushWithRedirect vue-router.esm-bundler.js:2979
    push vue-router.esm-bundler.js:2915
    install vue-router.esm-bundler.js:3329
    use runtime-core.esm-bundler.js:3808
    <anonymous> main.js:22
    433 main.mjs:1
    __webpack_require__ main.mjs:1
    <anonymous> main.mjs:1

vue.config.cjs

module.exports = {
  configureWebpack: {
    target: "webworker",
    output: {
      filename: "[name].mjs",
      chunkFilename: "[name].mjs",
      chunkFormat: "array-push",
      library: {
        type: "module",
      },
    },
    mode: "production",
    entry: "./src/main.js",
    optimization: {
      splitChunks: false,
    },
    experiments: {
      outputModule: true,
    },
  },
  filenameHashing: false,
  pluginOptions: {
    autoRouting: {
      chunkNamePrefix: "page-",
    },
  },
};

babel.config.cjs

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import routes from "vue-auto-routing";
import { createRouterLayout } from "vue-router-layout";

const RouterLayout = createRouterLayout((layout) => {
  return import("@/layouts/" + layout + ".vue");
});

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: RouterLayout,
      children: routes,
    },
  ],
});

export default router;

src/main.js

import { createApp, h } from "vue";
import App from "@/App.vue";
import router from "@/router";

const app = createApp({
  render() {
    return h(App);
  },
});

app.use(router);

app.mount("#app");

transition is not work for router-view in app.vue

When I was using thevue-cli-plugin-auto-routing, which use the vue-router-layout inside. I found that, the transition in app.vue is not working as expected. (the leave transition was missing)

When it is ssr, it causes the page to be a js instead of a dom structure.

Resolve layout option dynamically

How to load the layout dynamically？

Defining the layout via an object errors out

In my home page I have specified a specific layout to use as such:

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  layout: {
    name: 'public',
    props: {
      pageTitle: 'Search',
    },
  },
  components: {
    HelloWorld
  }
}
</script>

This results in no page rendered and this error in the console:

Uncaught (in promise) Error: Cannot find module './[object Object].vue'
    at eval (eval at ./src/layouts lazy recursive ^\.\/.*\.vue$ (app.js:1053), <anonymous>:15:12)

However, specifying the layout using a string works fine:

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  layout: 'public',
  components: {
    HelloWorld
  }
}
</script>

I'd really like to be able to pass props. Any ideas? Thanks!

How to combine this with Route-Auto

Did not see the relevant tutorial

How to sovle Vite dynamic import problem?

|  Vue.use(Router);
6  |  const RouterLayout = createRouterLayout((layout) => {
7  |    return import("@/layouts/" + layout + ".vue");
   |                  ^
8  |  });
9  |  const router = new Router({
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

This plugin works fine with webpack but when I try to switch to vite, this problem happens and I dont know how to resolve it.
Please give me some help, thanks a lot!

<template>
     <div>
        <keep-alive include="home,about" :max="10">
             <router-view />
        </keep-alive>
    </div>
</template>

it can't keep the pages/home.vue and pages/about.vue alive.

home.vue

<template>
     <div>
        home page
    </div>
</template>
<script>
    export default {
        name: 'home'
    }
</script>

add nested: false in vue.config.js, it worked.

ktsn / vue-router-layout Goto Github PK

vue-router-layout's Issues

feature request: please support vue-class-component

[Feature Request/Question] Support of Composition API and <script setup>

ESM Builder Compatibility

transition is not work for router-view in app.vue

When it is ssr, it causes the page to be a js instead of a dom structure.

Resolve layout option dynamically

Defining the layout via an object errors out

How to combine this with Route-Auto

How to sovle Vite dynamic import problem?

The lifecycle function that enters the page for the first time is executed twice.

Bug report] The created hook in page is wrongly called when layout changes in Vue3.

keep-alive not work

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent