Comments (6)
Thank you! This option is certainly interesting too and may be suitable for some simple cases.
But in my case, adding and removing site translations is done through the GUI in the admin area of the site. That is, there is no need to change the code and users do not even need to refresh the page for the update to apply.
Hopefully there will be an update for the @nuxtjs/router
module soon:
https://modules.nuxtjs.org >>>
from router-module.
Figured out how to make the router reactive making use of one of vue3 awesome features:
In your router file:
import Vue from "vue";
import Router from "vue-router";
import { reactive } from "@vue/composition-api";
// "reactive" does all the magic
export const router = reactive(
new Router({
routes: [
// your routes
],
mode: "history",
linkActiveClass: "is--route",
linkExactActiveClass: "is--routeExact",
scrollBehavior(_to, _from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
})
);
router.beforeEach((to, _from, next) => {
/* It will change the title when the router is changed */
if (process.browser) {
// resets and defaults to stored title if it doesn't have one
document.title = to.meta!.title ? to.meta!.title : "My project";
}
next();
});
Vue.use(Router);
/**
* Router constructor, required by nuxt
*/
export function createRouter() {
return router;
}
Then on your project components:
<script lang="ts">
import { defineComponent, computed, watch } from "@vue/composition-api";
import { router } from "~/routes/router";
export default defineComponent({
setup() {
const route = computed(() => router.currentRoute);
watch(
route,
() => {
// do something after route change
},
{
immediate: true,
deep: true,
}
);
}
})
</script>
Hope it does help you. Since there is not a lot of people talking about this right now. Still keeping the issue open since the question is not related to this specific fix.
from router-module.
@tol64 I have since moved away from that approach which I had to use due to the necessity of multiple components per view in my project. Now in nuxt3 layouts work in such a way that you can use slots making it easier to do such things. In your case I recommend you to follow the pages directory approach: https://v3.nuxtjs.org/guide/directory-structure/pages.
A possible file structure according to the information you provided could be like this:
Both folders have locale as dynamic parameter but the double brackets on the first one indicate that it is optional. Additional vue router parameters could be added to nuxt config or a "app/router.options.ts" file.
Additionally the logic behind locallization matching could be moved to a middleware to validate the usage of valid locales. https://v3.nuxtjs.org/guide/directory-structure/middleware
Hope this helps you. Good luck.
from router-module.
Vue router 4 docs: https://next.router.vuejs.org/guide/
from router-module.
I work with Nuxt
. And now I'm trying to translate a project from Nuxt 2
to Nuxt 3
. In Nuxt 2
I used @nuxtjs/router
module to configure the router.
Here is a brief example of the contents of router.js
file:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const page = path => () => import(`~/pages/${path}`).then(m => m.default || m);
let locale = '/:locale';
let routes = [
{ path: locale+'?/', name: 'index', component: page('index') },
{ path: locale+'/about', name: 'about', component: page('about') },
{ path: locale+'/test', name: 'test', component: page('test') },
// ...
];
export function createRouter() {
return new Router({
routes: routes,
mode: 'history'
});
}
export function resetRouter() {
const newRouter = createRouter();
return newRouter.matcher;
}
Routing adjustments were made in the store\index.js
file:
export const actions = {
async nuxtServerInit({ state }) {
let regPattern1 = new RegExp(/\/:locale(\(.*\))?\?\//);
let regPattern2 = new RegExp(/\/:locale(\(.*\))?\//);
this.$router.options.routes.forEach(r => {
const replaceValue = '/:locale(' + state.data.locales.string + ')';
if (r.path.match(regPattern1)) {
r.path = r.path.replace(regPattern1, replaceValue + '?/');
}
else if(r.path.match(regPattern2)) {
r.path = r.path.replace(regPattern2, replaceValue + '/');
}
});
this.$router.matcher = resetRouter();
}
}
How can this be done for Nuxt 3
?
from router-module.
Looks like no progress.
After I encountered with the incompatibility problem, I decided to check the source code.
if (!options.parsePages) {
this.nuxt.hook('build:before', () => {
this.nuxt.options.build.createRoutes = () => {
return []
}
})
}
There is no createRoutes
anymore.
Also is has not understood how to assign the imported router from to actual nuxt router.
Would someone be so kind to give me the hint?
from router-module.
Related Issues (20)
- base route is appended to url on page referesh HOT 1
- next() function is not working well HOT 1
- children in route.js don't work HOT 2
- Custom router in .nuxt folder HOT 2
- does it support nuxt3 with vue3 HOT 3
- Release HOT 1
- Cannot start nuxt: Cannot find module 'nuxt/lib/app/router' in nuxt3 HOT 5
- Readme "If you are using Nuxt < 2.16.0, the parameter store is not available" HOT 2
- the css load order changes after using @nuxtjs/router
- Cannot extend routes from a module
- Code splitting not working with router.js HOT 3
- `Cannot read properties of undefined (reading 'options')` on add @nuxtjs/router to Nuxt 3 project HOT 1
- Docs: Missing correct docs about the `store` parameter.
- Can I access to the routes within another module?
- Anchor link dont work on yarn generate
- Is this module compatible with SSG build?
- Nuxt 3 Support HOT 1
- Nuxt content not generate or parse to custom router
- Hydratation error with SSG HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from router-module.