Activities

calvinxie001

calvinxie001 posted a new question

router-module •

nuxt can support route lazyLoad mode when using route-module to handle the routes

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

xerosanyam posted a new question

router-module •

beforeRouteUpdate is calling beforeDestroy

When I used vue-cli, beforeDestroy was not getting called but in nuxt it is getting called. what to do ?

cron13

cron13 posted a new question

router-module •

How to deal with Stateful Singleton?

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

wimil posted a new question

router-module •

error 404

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

simplenotezy posted a new bug report

router-module •

bug Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification.

Version

v1.3.0

Steps to reproduce

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.

enter image description here

I have found this issue, but to little avail: https://github.com/nuxt/nuxt.js/issues/165

What is expected ?

No error should be outputted

What is actually happening?

An error is being outputted even though it links just fine

mrfrase3

mrfrase3 posted a new feature request

router-module •

idea named index.vue files

What problem does this feature solve?

It can get a bit confusing/annoying when you have 30 index.vue, or 10 _id.vue files

What does the proposed changes look like?

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

fadonascimento posted a new question

router-module •

The variables environments not available on router file

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.

andre-brdoch

andre-brdoch posted a new question

router-module •

possibility to add payload to route?

The generate option in nuxt.config.js allows to pass payload into the page component.
This allows to fetch dynamic content only once, speeding up the build process and avoiding possible rate limits of the APIs the content is pulled from.

Is it possible to do something similar with this module? I can not find something like this in the code.

faizalami

faizalami posted a new question

router-module •

Route Children

How to make route children?

I've made a route configuration below, but it doesn't work

{
path: '/parent-path',
component: ParentComponent,
children: [
{
path: '/my-feature',
component: MyFeature
}
]
}

and in my ParentComponent I also have included <nuxt-child /> component

in browser I called server:port/parent-path/my-feature, but it doesn't work

wkd709

wkd709 posted a new question

router-module •

路由懒加载不行
LiuJiangshan

LiuJiangshan posted a new question

router-module •

In production mode, only the first visit is valid

Nothing to preview

PayteR

PayteR posted a new question

router-module •

Router needs to be always instantiated - new Router()
Frankwarnaar

Frankwarnaar posted a new bug report

router-module •

bug Scroll position

Version

v1.4.0

Reproduction link

https://github.com/Frankwarnaar/nuxt-router-scrollposition-issue-demo

Steps to reproduce

Navigate to https://quizzical-villani-0e65e2.netlify.com (a deploy of the repo I provided). Scroll a bit down and then click the Other page link. Then click browser back.

What is expected ?

The scroll position should be the same as before leaving the page.

What is actually happening?

The scroll position is reset.

Additional comments

I'm running with the keepDefaultRouter option set to true. My router can be found in src/router.js. I've been trying to debug the issue, by providing a scrollPosition function to my router. Somehow the savedPosition argument was always { x: 0, y: 0 }, .

goors

goors posted a new question

router-module •

i18n

How can I use i18n module in this router?

for example home page / to be /en or any other lang
or for example /en/shop or /de/shop and so on.

sqram

sqram posted a new question

router-module •

Nuxt Generate

I've tried using this module with nuxt generate but the compiled pages doesn't seem to be generated. (using Nuxt 2.8)
Found a project using this module, and nuxt 2.0, and nuxt generate did not generate the pages as well.
Is this bug or something I should create a feature request for?

tonimota

tonimota posted a new question

router-module •

How to access store from router-module nuxt^2.8.1 ? #51

I'm using nuxt version 2.8.1 and the new structure Vuex Mode with modules.
https://nuxtjs.org/guide/vuex-store#activate-the-store

About the classic mode vuex: This feature is deprecated and will be removed in Nuxt 3.

About router, i'm using vue-router module to management from route.

I trying to use store in ~/router.js but i'm not getting it….

My structure code
/store

user.js
lang.js
/router.js
How to user store in my ~/router.js ?

tonimota

tonimota posted a new question

router-module •

How to access store from router-module nuxt^2.8.1 ?

I'm using nuxt version 2.8.1 and the new structure Vuex Mode with modules.
https://nuxtjs.org/guide/vuex-store#activate-the-store

About the classic mode vuex: This feature is deprecated and will be removed in Nuxt 3.

About router, i'm using vue-router module to management from route.

I'm using the vue-router module for route management and have been unable to access the data from my "store" in my ~/router.js file.

My structure code
/store

  • user.js
  • lang.js

/router.js

I want to access the stored data from my ~/router.js file, how can I do that?

hecktarzuli

hecktarzuli posted a new question

router-module •

Why a plugin?

I'm wondering why module.js uses .addPlugin for router.js. It seems like you could just use addTemplate to use lodash templating instead. Nuxt's index.js imports createRouter right from ./router.js.

Since you use addPlugin, router.js is also added as a plugin which seems unused/useless.

Am I missing something?

Pasted_Image_5_8_19__3_03_PM.png

lwswnnscrm

lwswnnscrm posted a new question

router-module •

Use only in server side.

Hi @Atinux , in my case i need take routes by ip user and host, but if i use context in createRouter function i get [nuxt] Error while mounting app: TypeError: Cannot read property 'req' of undefined. Can i use router only in server side?

Code:

import Vue from 'vue';
import Router from 'vue-router';
import generateRoutes from '~/helpers/generateRoutes';


Vue.use(Router);

export const createRouter = async (context) => {
  const host = context.req.headers.host;
  const ip = context.req.headers['x-forwarded-for'] || context.req.connection.remoteAddress;
  return new Router({
    mode: 'history',
    routes: await generateRoutes(host, ip),
  });
};
const generateRoutes = async (host, ip) => {
  const resultRouters = router;
  if (host.indexOf('exemple1.com') !== -1) {
    resultRouters.unshift(
      {
        path: '/',
        name: 'page',
        component: page,
      },
    );
    return resultRouters;
  }
  if (host.indexOf('exemple2.com'') !== -1) {
    resultRouters.unshift(
      {
        path: '/',
        name: 'page2',
        component: page2,
      },
    );
    return resultRouters;
  }
  if (host.indexOf('exemple3.com'') !== -1) {
    resultRouters.unshift(
      {
        path: '/',
        name: 'page3',
        component: page3,
      },
    );
    return resultRouters;
  }
  const location = await generateRoutersByLocations(ip);
  if (location.toLowerCase() === 'au' || location.toLowerCase() === 'nz') {
    resultRouters.unshift(
      {
        path: '/',
        name: 'page4',
        component: page4,
      },
    );
    return resultRouters;
  }
  resultRouters.unshift(
    {
      path: '/',
      name: 'mainPage',
      component: mainPage,
    },
  );
  return resultRouters;
};

export default generateRoutes;
const generateRoutersByLocations = async (ip) => {
  const { headers } = await axios.get(urls.apiUrl + urls.initPage, { params: { ip } });
  const location = headers['x-geo-ip-country'];
  return location;
};

export default generateRoutersByLocations;
kdeng

kdeng posted a new bug report

router-module •

bug multiple named views cause router.js contains syntax error

Version

v2.4.3

Reproduction link

https://github.com/kdeng/nuxt-named-view-sample

Steps to reproduce

  1. Run npm i
  2. Run npm run dev

What is expected ?

I expected router.js can be generated properly, and named view can be rendered properly.

What is actually happening?

router.js has been generated with syntax error.

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                   friendly-errors 22:13:34


 ERROR  in ./.nuxt/router.js                                                                                                                                                                                                                              friendly-errors 22:13:34

Syntax Error: Unexpected token, expected "," (86:8)                                                                                                                                                                                                       friendly-errors 22:13:34

  84 |         default: _708facd7,
  85 |         footer: _03b372e3
> 86 |         default: _6fab42f0,
     |         ^
  87 |         top: _6b7085a2
  88 |       },
  89 |       name: "main"

                                                                                                                                                                                                                                                          friendly-errors 22:13:34
 @ ./.nuxt/index.js 8:0-43 59:19-31
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                                                                                                          friendly-errors 22:13:34
ℹ Waiting for file changes

Additional comments?

I am new to nuxtjs, and try to play around about named views for enabling master footer component for cart router, I am not sure whether it is my mistake or router module bug. Cheers.