winktim posted a new bug report
router-module •
https://codesandbox.io/s/vigilant-booth-27tv8?file=/pages/index.vue
Run a sandbox project
Call this.$router.push("/about"); in the component
Watch the returned value
push should return a Promise if it is not given an onComplete and onAbort parameter and Promises are supported.
From https://router.vuejs.org/guide/essentials/navigation.html
In 3.1.0+, you can omit the 2nd and 3rd parameter and router.push/router.replace will return a promise instead if Promises are supported.
push is returning undefined.
Here is the incriminated line that for some reason replaces the push function and uses a default parameter for onComplete, which prevents the original function from ever returning a Promise.
Onefivefournine posted a new question
router-module •
Is there any way to access routes to pass them to sitemap module ( https://github.com/nuxt-community/sitemap-module )?
Importing routes array directly from router file fails (Cannot find module "~/router")
ErickPetru posted a new question
router-module •
I'm using this module along with an async
createRouter
to be able to load routes from an API (which in the future will return different routes based on many things like request referer, headers, auth, and so on).
It's working well if I import axios
directly. Currently I'm doing this way:
import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
Vue.use(VueRouter)
export async function createRouter (ssrContext, createDefaultRouter, routerOptions) {
const options = routerOptions || createDefaultRouter(ssrContext).options
const { data: { routes } } = await axios.get('https://run.mocky.io/v3/06de3ae7-9cb7-4aa8-b7ea-cac20476d0d7')
return new VueRouter({
...options,
routes: [
...routes.map((r) => ({
name: r.name,
path: r.path,
meta: { auth: r.auth },
component: () => import(`~/pages/${r.component}.vue`)
.then((m) => m.default || m)
})),
{
name: '404',
path: '*',
meta: { auth: false },
component: () => import('~/pages/404.vue')
.then((m) => m.default || m)
}
]
})
}
But I will have axios configurations (like baseURL
, retry
and headers
) in my nuxt.config.js
, so I need the nuxtjs/axios module working inside createRouter
. Or at least a way to create a NuxtAxiosInstance
on the fly, just to use inside this method.
Is it possible at all in some way?
woodgates posted a new question
router-module •
Hi.
I'm migrating from Vue Cli to NUXT and I'm using the router module.
In my app I have the routes with webpack chunknames like this:
router.js
const Welcome = ()=> import /* webpackChunkName: "personal-panel" */ ('./views/auth/Welcome.vue')
……
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{path:'/bienvenido',name:'welcome',component:Welcome}
…..
should I keep using this format or I use this:
import Welcome from './views/auth/Welcome .vue'
B/R
bitsmakerde posted a new question
router-module •
Hi,
I want have a navigation with tow links and a isActive state, but by the root path is the is active alays active. I f a change the path root doesn't remove the isActive state
<router-link v-slot="{ href, route, navigate, isActive }" to="/">
<li :class="[isActive && 'is-active']">
<a :href="href" @click="navigate">Generator</a>
</li>
</router-link>
<router-link
v-slot="{ href, route, navigate, isActive }"
to="/manuell"
>
<li :class="[isActive && 'is-active']">
<a :href="href" @click="navigate">Anleitung</a>
</li>
</router-link>
<router-link v-slot="{ href, route, navigate, isActive }" to="/test">
<li :class="[isActive && 'is-active']">
<a :href="href" @click="navigate">Test</a>
</li>
</router-link>
AyozeM posted a new bug report
router-module •
https://github.com/AyozeM/nuxt-router-example
Install dependencies
Show router.js to check routes.
npm run generate
That each route definition generate static html page, as defatult nuxt router.
No generate static pages from router.js
mahdikmg posted a new bug report
router-module •
https://github.com/mahdikmg/nuxt-router-module-bug
just install dependencies, run the project and open it in your browser.
when i open project in browser it happens and prevent page to render.
when i remove '@nuxtjs/router' from build modules in nuxt.config.js file, the error will solve.
any help will appreciated
slidenerd posted a new question
router-module •
I am using the custom @nuxtjs/router module with a router.js file to declare some of my routes
My route.js file would look as follows
import Vue from 'vue'
import Router from 'vue-router'
import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
component: News
}
{
path: '/login',
component: Login,
},
{
path: '/signup',
component: Signup,
},
{
path: '/account',
component: Account,
},
],
})
}
When I open the /login route from my home page, I want it to open as modal on Desktop and page on mobile. How do I achieve this? Super appreciate if anyone can suggest how to go about this
lluishi93 posted a new feature request
router-module •
Enable the router module to work. with Nuxt 2.14, it is not working atm.
juniorgarcia posted a new question
router-module •
I would like to attach data on $route.meta
on asyncData
to make it available on the client.
Consider this asyncData
method from a page component that get a product info and puts some of this info into route.meta.breadcrumbs
:
<template>
<div>My page</div>
</template>
<router>
meta:
breadcrumbs:
- label: "Products"
link: "/products"
</router>
export default {
async asyncData({ app, route }) {
const product = await app.$getProduct()
// Here I can see the values from the `<router>` tag
route.meta.breadcrumbs.concat({ label: product?.title })
return {
// some data
}
}
}
When this page is shown on the browser, route.meta.breadcrumbs
does not have item I've added on asyncData
method.
I could return something from asyncData
, making this value available on my page's data
then set route.meta.foo
on client side, but I would not like to bloat my page with non-sense observable values.
Is there a way to do so?
I'm using @nuxtjs/router-extras
, by the way.
ando-amltd posted a new question
router-module •
Hello,
I have a vue-router with a simple route. But I want to dynamically change the path from an api call.
What is the best way to do that ?
router.js
…
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/my-component', => change this dynamically
name: 'my-component',
component: MyComponent
}
]
})
}
….
Thanks for your help
CDuane posted a new question
router-module •
Hi, I need to access my store instance from my routing configuration file. I found this but it requires to use classic mode for the store, which will be deprecated and which I need to avoid because it breaks some of my other code.
Anyone knows a way please? Maybe we can get access to the context from the router somehow?
zcserei posted a new question
router-module •
I am using the router module instead of Nuxt's standard router for my app. In my VueX actions I would like to programatically navigate, however, since there isn't an explicit router instance exported I'm not sure how to do that.
This is something I'd like to do inside an action:
router.push(redirectTarget)
Where should I import router
from?
calvinxie001 posted a new question
router-module •
When I use it, it will freeze after loading the homepage, causing the page to be inoperable for a long time.Can import components like this:
export function createRouter() {
return new Router({
mode: 'history',
routes:
{
path: '/',
component: () => import('@/views/index.vue')
}
})
}
xerosanyam posted a new question
router-module •
When I used vue-cli, beforeDestroy was not getting called but in nuxt it is getting called. what to do ?
cron13 posted a new question
router-module •
Hi, i use nuxt-community/router-module for rewrite routers on-the-fly like this:
export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
const options = routerOptions ? routerOptions : createDefaultRouter(ssrContext).options
const host = ssrContext?.req ? ssrContext.req.headers.host.split(':')[0] : window.location.host.split(':')[0]
return new Router({
...options,
routes: host === 'my-host.com' ? options.routes : options.routes.map(route => {
//Rewrite routes if i not on default host
if(route?.meta?.domainPath) {
route.path = route.meta.domainPath
}
return route
})
})
}
And everything work great in dev mode, but in production i ran into a problem with stateful-singletons https://ssr.vuejs.org/guide/structure.html#avoid-stateful-singletons
I can’t get the default routes every request, every time i get modified by route.path = route.meta.domainPath
Any ideas how to deal with it?
wimil posted a new question
router-module •
I followed the documentation guide did everything as is, but all routes come out as 404 not found
router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export function createRouter() {
return new Router({
mode: "history",
routes: [
{
name: "index",
path: "",
component: () => import("@/views/index")
},
{
name: "analytics",
path: "/analytics",
component: () => import("@/views/analytics")
},
{
name: "titles",
path: "/titles",
component: () => import("@/views/titles/index")
},
{
name: "titles-create",
path: "/titles/create",
component: () => import("@/views/titles/create")
},
{
name: "titles-id-edit",
path: "/titles/:id/edit",
component: () => import("@/views/titles/_id/edit")
},
{
name: "people",
path: "/people",
component: () => import("@/views/people/index")
},
{
name: "people-create",
path: "/people/create",
component: () => import("@/views/people/create")
},
{
name: "people-id-edit",
path: "/people/:id/edit",
component: () => import("@/views/people/_id/edit")
},
{
name: "links",
path: "/links",
component: () => import("@/views/links")
},
{
name: "users",
path: "/users",
component: () => import("@/views/users")
},
{
path: "/settings",
component: () => import("@/views/settings"),
children: [
{
path: "",
component: () => import("@/views/settings/index"),
name: "settings"
},
{
path: "analytics",
component: () => import("@/views/settings/analytics"),
name: "settings-analytics"
},
{
path: "auth",
component: () => import("@/views/settings/auth"),
name: "settings-auth"
},
{
path: "cache",
component: () => import("@/views/settings/cache"),
name: "settings-cache"
},
{
path: "mail",
component: () => import("@/views/settings/mail"),
name: "settings-mail"
},
{
path: "recaptcha",
component: () => import("@/views/settings/recaptcha"),
name: "settings-recaptcha"
},
{
path: "upload",
component: () => import("@/views/settings/upload"),
name: "settings-upload"
},
{
path: "/superadmin/permissions",
component: () => import("@/views/superadmin/permissions"),
name: "superadmin-permissions"
},
{
path: "/superadmin/roles",
component: () => import("@/views/superadmin/roles"),
name: "superadmin-roles"
}
]
}
]
});
}
nuxt: 2.11
@nuxtjs/router: 1.5.0
os: macos
simplenotezy posted a new bug report
router-module •
I have some dynamic routes. My folder structure is this:
- pages
- product
- _slug.vue
I link to the route like this:
<nuxt-link :to="{ name: 'product-slug', params: { slug: product.slug } }">
It works fine, it shows the correct URL and also directs the page fine, however, I am getting an annoying red error in my console:
[Vue warn]: Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification.
I have found this issue, but to little avail: https://github.com/nuxt/nuxt.js/issues/165
No error should be outputted
An error is being outputted even though it links just fine
mrfrase3 posted a new feature request
router-module •
It can get a bit confusing/annoying when you have 30 index.vue, or 10 _id.vue files
the ability to add a name to a dynamic file which is ignored.
e.g. index.users.vue _id.classes.vue index.homepage.vue
fadonascimento posted a new question
router-module •
I'm using the default routes options and add new routes by ajax, it works very well but I need to load the .env file in another folder if I change the folder where I need to load the .env file the variables environments not available on router file.
I use the follow (example)[https://www.npmjs.com/package/dotenv#path] to load the .env file in another path
Note: I try to use the options from nuxt-dotenv module, but the app stop to working.