I've been struggling with a Nuxt Generate problem for quite some while. Whenever I add ssr: true to nuxt.config and try to generate dynamic routes, the generation freezes. Nuxt generates x amount of routes just how I want them, but is unable to finish the process. No error is given by Nuxt, just stops at some route. My generate setup is as simple as this:
generate: {
crawler: false,
interval: 150,
routes () {
return axios.get(process.env.API_URL + '/events/routes').then(res => {
/*
API returns an array of event routes:
['/organiser/event', '/organiser/event-1']
*/
return res.data
})
}
}
It seems to work as expected when I manually add an array of routes, as follows:
routes: ['/organiser/event, '/organiser/event-1', '/etc/event']
Any ideas?
The default value of the ssr property is true and thus you can omit ssr: true from nuxt.config.js. And in your case you should omit it because it's causing you issues.
Related
My goal is to have the following page structure
pages
--/users/
--/users/:id/
--/users/:id/edit/
edit should be generated for every :id. Right now my setup works only in development mode. On nuxt generate only the first /users/:id/edit/ is generated. All other routes get a 404 error on production!
Current setup:
- /users
- index.vue
/_id
- index.vue
- edit.vue
I also tried to add another _id.vue which i found in the documentation and here
/users
- _id.vue
- /id
[...]
I checked this as well.
In nuxt.config.js I have
ssr: true,
target: 'static',
Do I need to add something in router property in nuxt.config.js? I am not sure why it is not generated in production.
If you are using static site generation you have to define your static routes, because Nuxt does not know how many users do you have in your data base.
You can set a generate method into your nuxt.config.js file:
generate: {
fallback: true,
async routes() {
const routes = await _getRoutes()
return routes
}
}
And then declare a function called _getRoutes to generate a list of dynamic routes:
async function _getRoutes($content) {
const usersList = [1, 2, 3] // get from your DB
const paths = []
usersList.forEach((userId) => {
paths.push(`/users/${userId}`)
paths.push(`/users/${userId}/edit`)
})
return paths
}
this is a bug with nuxt 2 in vue 2.
for dynamically generated routes, and also not-english nested routes ,
(or maybe just generally non-english routes) when vue hydrates the component , it will face a problem and restarts it . so the data that you cached in data(){} with fetch(), will be empty again .
currently you should use static and/or english-only routes .
I have question related to using context or prototype in Nuxt
I create a constant for 'modal' name like this:
export default Object.freeze({
MODAL_SHOWPRO: "MODAL_SHOWPRO",
})
I also created constant.js in plugin folder and already added to nuxt config.
import modals from '#/constants/modal';
export default ({ app }, inject) => {
inject('modalName', modals)
}
In component I can't call value from v-bind, it said : undefined MODAL_SHOWPRO
<Popup :id="$modalName.MODAL_SHOWPRO" />
but I can call it from $emit function something like this:
#click="$nuxt.$emit('showModal', {id: $modalName.MODAL_SHOWPRO})"
Can you let me know why and how to fix it?
Notice: It will work if:
I make data
{
modal: ''
}
and add to created:
async created() {
this.modalName = await this.$modalName
}
Nuxt is a meta-framework aimed at providing an universal app (server then client side). So, you need to think about both server and client.
In your code, you specified ssr: false, this is outdated and should rather be mode: 'client'. But setting so is still false because it means that the ENUM will not be available on the server (hence the error).
Setting it like this is more appropriate (regarding the nature of the plugin) and also fixes the issue
plugins: ['~/plugins/constant.js'],
More on Nuxt plugins: https://nuxtjs.org/docs/directory-structure/plugins#plugins-directory
I need to develop an application with server side authentication with a login view. If I want to use Vue Router to dynamically switch between login and index (the protected view), I need to avoid login view downloading (prefetching) index before succesful authentication, because if not, server will answer with the login page to the index prefetching request.
I'm trying to achieve this in the original Vue Router example that has two routes. Home and about. The first one is included and the second one is lazy loaded (but prefetched) which would be the protected page in the real application.
In order to avoid prefetching I have tried all the webpack magic comments I have found, but the prefetching is still hapenning.
Here is the code:
import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about"*/ /* webpackMode: "lazy" */ /* webpackPrefetch: false */ /* webpackPreload: false */ "../views/About.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
And here the result:
I don't want to disable the feature from the general webpack configuration because I want it for the rest of the application links. I want to disable it only for this link.
How I should configure the router to achieve it?
Thanks for your time,
H25E
There is a discussion on Github which offers some tips relevant to your situation.
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('prefetch').tap(options => {
options.fileBlackList.push([/MyChunkName(.*)\.js$/]);
return options;
});
}
};
Vue-CLI by default automatically prefetches all dynamic imports - so you have to add a blacklist.
The magic comments for Webpack (webpackPrefetch and probably webpackPreload too) accept either true or a number (index) - but do not accept false argument.
Nuxt/Vue: How to call an external script (hosted by a third party) after and only after the DOM has rerendered? On every route.
I'm using a script that adds elements to the dom, but the virtual dom doesn't match. So, once the script has added the elements, the virtual dom removes them all.
Adding a defer tag doesn't do anything, it just loads the script after the initial render, then the same thing happens with the rerender.
Presumably this problem is common using frameworks like this.
No errors messages — just a single flash of dom elements before rerender. This is the expected behavior with my current set up, but I'm looking (desperate) for a work around.
First, you would make a plugin:
export default ({ app: { head, router, context } }, inject) => {
head.scripts.push({
src: 'http(s)://example.com/script.js'
async: false,
defer: true
})
})
Then you would add the plugin to your nuxt.config.js in your plugins: [] section:
plugins: [
// ....
{ src: '~/plugins/script-injecter.js', ssr: false }
]
Now it will only be provided on page load, and with async: false and defer: true, it will only be executed once the page has finished loading.
You can use defer:true when referencing the script in your nuxt.config.js.
script defer attribute
defer in vue-meta
I am trying to build an app with framework7 and vue. All is well, except that when I start the app, it does not load the component specified on routes.js. I want it to load the component specified by the root url. How can I do this?
main.js
new Vue({
el: '#app',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
material: true,
swipePanel: 'left',
routes: Routes,
pushState: true,
animateNavBackIcon: true,
input: {
}
},
})
routes.js
export default [
{
path: '/',
component: require('./assets/vue/pages/home.vue')
}
]
I decided to use the preroute object on framework7 Initialization, so that even before '/' route is loaded, I can manipulate the request and redirect to a particular route. Read more on preroute here: https://framework7.io/docs/init-app.html
I'm not sure it is the same case as yours:
At first time, I did not add f7-view in my application.html, and the route did not work.
After adding <f7-view main>, the route started work and show the page.
I think f7-view is almost like router-view, is a output interface of the routing result.
If you add f7-view already, then just ignore this answer :-)