'include' pages using 'nuxt.js' 'keep-alive' are not cached.
<Nuxt keep-alive :keep-alive-props="{exclude: ['pages/basket.vue']}" />
I tried the method above.
Excluded by yarn dev, but not by yarn generate.
Do you know how to exclude it in yarn generate as well?
environment
"nuxt": "2.15.8",
"vue": "2.6.14",
Referenced site
https://nuxtjs.org/docs/features/nuxt-components/#keep-alive
add
I want to include or ignore certain pages.
<Nuxt keep-alive :keep-alive-props="{include: ['pages/basket.vue']}" />
All pages are uncached, including 'pages/basket.vue'.
<Nuxt keep-alive />
All pages are cached, including 'pages/basket.vue'.
Related
I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample.
<div class="chat-container clearfix" id="chat">
<div class="people-list" id="people-list">
<chatlist-component></chatlist-component>
</div>
<div class="chat">
<router-view></router-view>
</div>
</div>
chat list component will load friend list from the server. Here is my app.js file;
Vue.use(VueRouter)
const router = new VueRouter({
routes,
linkActiveClass: "active"
});
import ChatComponent from './components/ChatComponent';
const routes = [
{ path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
];
Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));
const app = new Vue({
el: '#chat',
router
});
And Chat list component template code
<li class="clearfix" v-for="user in users">
<img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" />
<router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}">
<div class="name">{{user.name}}</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</router-link>
</li>
It works fine until I switch to another user. When I click on any router list from chatlist component it works fine but throws following error to console.
app.js:19302 [Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"
Thanks in advance
First, these errors only come out in non-production builds, however they indicate a problem that should be resolved before production release.
The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded. As I understand it, this can happen usually for one these reasons:
it is being loaded/packed into the bundle by webpack and also loaded externally (not via webpack)
it is being loaded by something you include (e.g. vuetify, vue-test-utils, vue-cli-electron-builder) one way and by your webpack config another way (e.g. absolute vs relative paths, common.js vs esm.js vue files, runtime-only vue vs compiler+runtime vue)
If you click on that line (it was app.js:19302 in your output above) and put a breakpoint where the message is coming out, you can see the list of modules in the stack traceback to see if there's more than one path to Vue listed. For example, see that the top three modules have a different path below (but are all part of Vue):
If you see Vue showing up in two or more different ways, it demonstrates that more than one instance of Vue is loaded. Vue only supports a single instance, and can produce these error messages if more than one is loaded.
There are several links to issues included above, the Vuetify issue was the one I filed. In that case, Vuetify requires Vue and was loading it differently than I was. Usually the fix is to check your webpack config where Vue is specified (or isn't) and try to make it match the way the other copy is being included (e.g. absolute vs relative path, or packed vs external).
This error was happening to me because I was using Git submodules in my project and I had the following folders:
./node_modules - this is for the main project. There was vue installed in these node_modules.
./my_git_submodules/vue_design_system/node_modules - design system that provides basic components (also uses vue). Vue was also installed here!!
So because both:
./node_modules/vue and
./my_git_submodules/vue_design_system/node_modules/vue
existed, running npm run serve (vue-cli-service build underneath) built two instances of Vue. This was
a really nasty issue because it broke reactivity in certain cases
(ie. you click a button and nothing happens - you just get the
$listeners readonly error)
Quick fix:
removing node_modules in the child folder (vue_design_system) and running npm run serve worked for me.
Long term fix:
you'll probably need to make Webpack ignore nested node_modules folders by adding a rule in vue.config.js
Adding this to vue.config.js, worked for me.
const path = require('path')
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}
I faced the same problem. For me, as I installed a local module using
yarn add ../somemodule --force
Seems this command will copy the whole module directory include the node_modules sub-directory. That causes the duplication of the same version of "vue" module. And in the browser devtool I can see multiple sources of the module.
For me, the solution is manually to delete the node_modules every time after install the local module.
In my case, I was migrating from a project that didn't use VueCLI. In that project, I imported vue from a CDN <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>. In my Vue CLI project, I had copied and pasted my whole index.html file to the Public folder. Vue CLI has it's own way of importing vue so they were clashing. I simply removed the script and the problem was solved.
I had the same problem as above. I am using git submodules and I used
yarn add ./submodule
Somehow there ended up being a node_modules directory in the ./submodule directory and that confused everything.
And it was loading two Vue instances.
This can also happen because you are using npm link to use your unpublished vue packages. Basically identical to #walnut_salami explanation.
The fix for this problem is by moving to this way of including unpublished modules.
Looks like as if there are many possible answers.
I added a npm package manually to the node folder and the problem was the missing npm i command. After using the install command, everything worked fine.
In my case, this error arose after module federating my components.
I solved it by sharing vue in the component receiver to the component supplier.
e.g
webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "dashboard",
remotes: {
web_common: "web_common#http://localhost:8081/remoteEntry.js"
},
shared: {
vue: { // this solved my issue.
eager: true,
singleton: true,
requiredVersion: deps.vue
},
}
}),
]
}
We have vuejs version 2.6.40 app running as SPA using Laravel as backend API.
When we run command npm run build it generates files into dist/* using the same HASH each time for production build.
css/chunk-vendors.1a7cdba8.css
js/chunk-vendors.d2af6920.js
css/app.7ca97c3b.css
js/app.7c8415cc.js
This same HASH creating a huge problem for browser cache, if this has new hash each time will solve vue js browser cache issue.
our vue.config.js has following settgins
module.exports = {
lintOnSave: false,
productionSourceMap: false,
}
I was struggling with what I though was this issue. However a new hash is only generated if the contents of an asset changes. In other words just rebuilding to dist without changes to your project source files won’t change all the hashes. If you change source css / js files you will notice that the hashes (some, not necessarily all) will change…
Further reading here: https://webpack.js.org/guides/caching/
What could be causing your caching issue is that your index.html file is cached, and hence referencing your assets with previous hashes. Setting no-cache in your headers for index.html should help with that!
In the latest version of Nuxt (2.15.7) I have error when running dev, the Navbar and Footer placed in default layout disappear, and it reverts back to the default. This can be seen at start of command, when watching the file, the div, Navbar and Footer lines are removed, leaving just and therefore no nav or footer.
I have not seen this before and cant find anywhere where someone has, so just seeing if anyone on SO has come across this as it is an annoying bug?
It goes from
<template>
<div>
<Navbar />
<Nuxt />
<Footer />
</div>
</template>
to
<template>
<Nuxt />
</template>
in early stages of the npm run dev command?
EDIT
v14.17.3 Node
6.14.13 NPM
But I scrapped the layout and used older version of Nuxt
i created a vue project using vue-cli 3 and while working in my local env i managed to present all images in components html part the following way:
<template>
<img class="logo" src="#/assets/images/logo.svg" alt="logo">
</template>
in my machine the full path to the image (starting from the src folder as root) is src/assests/images/logo.svg
when running the project on the local env the image loads and it's source is
/assets/images/logo.svg which redirects to http://localhost:8080//assets/images/logo.svg.
now when i upload the project to my staging env the source changes (and i cant figure out why) to src="/img/logo.230e726c.svg" and the image is missing.
following info i found online i also tried:
src="~#/assets/images/logo.svg" which didn't work as well .
any idea what am i missing here and how should i import images in my template? or how did the source url turn to this (what seems to be quite random) path?
UPDATE
i noticed that on my local machine , when inspecting the result in the dev tools, the content type is Content-Type: image/svg+xml; charset=UTF-8 and when inspecting on staging the content type is content-type: text/html
plus there also another header which only appears in staging and its content-encoding: gzip
, i'm not sure but does this should serve as some clue??
another thing worth mentioning, when trying to upload png every thing works fine and the image elemnt looks like this:
<img data-v-7d622f5c="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAwCAYAAADn/d+1AAAMwklEQVR42u2bC5SVVRXHmZk7w4ADgzM8RoZHQLzk/Q4UQVAhYEAEBEUQ8UGsABNUCoiHBCZQFIRKalEUgkX2QHvgo2gVRhCFoSAPMWKJiWGFDDDMve2Nv5Pb0/fdxyAyLOastde99/u+fc759t5n7//e59xKlSpaRatoFa2ihbVYLHaZUA+hfkLDhMYI3SF0m1CRUFuh6gF8nxLqA28k4H6W0NU8U1CGeTUWKkyRR8esJpSeAk9dodZC2eVFIV+KRqNvCx2T76eEorH3W6lQsdABoe+rYjy+7wi9K/R3oUsD+m0gdJRnhqQ4pzEynx1Cvw0yhhCemvouQmuFBiWjFHkmT8b4ldDr8n1yeVHIMqGTKCCKAPfIJA/K53tcL5XfP7aCl+/dUdxpoaYB/balP73fP4X5XCq0H16lxkny3SJz/DfzfUGoRiIeef4rPK/tZ+VFIY3UVWElKoCFXE8TainXn2TCJ4TaGb7qKEx5Hg7odxB8quxrvHvZKkChiUJtnLtQqxaaCo+2bdaV4F4vD3Gh/TCiEqHVQjlCmWoMQg8IDRWqY55vxwrWdlzouvIUR9rKy+y2CjH3GjJpvXeLd+85rr8R0Odk+FRpvb17rbiuLvI1oaUoprnQFvpUIU20K0fm+KLQq/J9vbpBFbinZI2D44WaYVCfENpKf/8U3l/K5ziU+oRxzz8KioPlVSFVYx+0md69u41baubdW3pGi9Hov+TjSu9efWJWNBbetqsxeBZdamOc+n8/tnnj5MszP/X4/KYu+tPlDWmVVSFXYMnKN8W7twae/QGAIAKCe1rGPRIirN8I1fL4Fmp8wwBiRuGrcE05IS55vtBfjCuMGf43y5W7OkuFfFJoF/fUjaSZe+t44d/LR72QcWtofMGKT1jFyLX/EAsKzfMaEzpozOL5mEGEhzUwA7MzvHEycGP381yp4VXlvgzUz77QFZKN0FSAL+qzTnCgshigIDPB+BrMBxPEj3sC0zgz3YfWChpYHX47wZxahuRHuepOWRmnPZj/vFCXC1YhBjoq3z6hjsaVHeb6shTmoStmrNAGhB01SnnIe7aOgomQuOBWzDyhSwLGUZfZUWiR0E6QGfYT/VuqCWm5UogGRIOYRnFtCX2dSsbigNDdUYiiozwQ0wvGitd6PNPoX6W4Vz5uF3qEIB0111sbt6W5URfn0lCMurJ5mhwbdNf4fCukPcFSLeuBFBWSZV5mitCdCOo0WXNagrFzhP+7oKY/aK7hxQwt5yxQqGyzcsBADOsea9GYuknNSYR+oMrl+kCjrLtDSkiTzmuAB0qO1qVLEC2x2D+eQvDFWgMaILz/YLkfxIe7zL56EnOoR1B1/N2T4Jlvgv//YpcX2zQHqWauzTAu8KlylXeYTPxzlBuKmezhAKj5IYU4PlbUIU24DAyNkl8s9vtJUBCcRqVgufP5jJsVwvMNBtOxBiRrfIr4cGNXl9dK71gy5T1kse0CnqlM4FO6C0S0EEW+RfHxFaGNlChalnEutkRSREb+wyCERkBfTPmlsqnaPszKbB8yRmX3vLl2FZC3TnlQSDZl7iZBSZXNeCFXc+oqNBLM3wYBVUkUL5KtrbFaXHzIT4InE0TliqRzkqz2tqdareOsuJj3YNRN3SA0QhXpJXBzHXqStsm6Lflem8SwSkC9bR9uVxHfOG+sev5KA2E9b+LKRa2Q3gb7bweyaomjF5m/E+xtdiOJoH+S7H80glao/JhLJkFqdUwp/1vEudUOcTm3aEop6nobJTv5CLhc8XI3oWvprIgXqx9QKojghpSndki/VXFXjXE3hTyfiBoS2Fuwa9gXSDmEbLs3m1OROO/U1RQXHfbfhjKsYOt7ZZpiU3lWns2aRJoyioKLmw3P5bikGG6ws1HUeuMWH0zFmq4Dc59Ao6egEn6/SyGvwAt6r3B/bUi/I+nzBIp+hucT0VZyh90B8znznSx7fVigxGBGmY2ooHafH5PYt9nrlVb8QqFdBXkAA4XhP3HlF4zoHdgUKXZLRSEDELpb4vrCu6E3uR4Fy7cy1v89nn85aPcMZOGsrYAl/UYAHTLPnUTQuqK24kL2gdR2oaRDDgZzv22Cbdd7MR6rmP02h/B4dCXPlL7/bKu+tGI2vQqdMqkCtHX96XWQWNS4q5FhELtSSAY5kAAUYwm2JSm7gkLZMRSzAFiaTiJ0GkvoH9DvVLOBlI476hJA3zbPaf7RAP4urKwOIK1WzElLIF8GFutLr4iHvnB/U4zb0VVWZFDgBMat6/G1QeF+ew8wcGfYziLPxMy+ykFK+N2TThidxeML071l+Ts63+gSMrY0j/CCkwL6+7pb5nHGrMxBAxXs05qdJznXDOej2UTKT1DpnetqVtJ+bqrGU4wHmOPx1aVC4FZvScCK2WCVgufYZr2cWSlRXO38s1VIGkldjO3P+m5XztSnHg+Ais/C81qcMfVIzR/dvrlNquR7T41vWFVGAO86E5wbxhmjEKTlBDLGuJv7EbK+w5KAKrNTwD5c8By5/iezt7LfOwdwk0NWjLVS6124fltZbl5mhTC5X9DZVuNSsrG2KC9c0+PZC8/mOGPmYlH/pxB9cVbgppCdunXGSOIpZLoR7BZbcsFdf1XG+aa6KHO9I27aoaTRTiagy0nIZLaJHflsYLkt5+WAixzg9ipVDAaU95ErBJ57mMBRq3VcioOQq8qokNeZz46gAJyCQt4y7mNkkt7iMcOzMcmsvDcF1Bieo31ALKvlFyo/aoW0Y/nqMhzjVVidb771PCtkNS5jrQ2oWG4khGcOeYjW0Xp6cDo7hKfIlFYecpk7ZZeqlVJtZVRIFSBp1K4E+f4Zkw03OM8KySXJtMF3IkBlQZD1k50PBOllmtxrBUd6goqkav1fpGKdb8oqT1DC73POFQLfcgS6BwuqReU2yktHzqdCQnKTQybzLkyCJ51E0q2A2ckUOuWZG02SuS+VM8GVOF97ZlsyYF87nkIGM+hxcobF1IMUZdyRYMxzohAEWC/oEDauahMudY93fLUJ5fJacZDaMW8HUZFi0xDg0ZU9oJNUO9KSqYrqYA3ITM+cV0pRIe7IZJRakTtHtSZRXnEOFdIVYe8igc0PSIaHeshKV84+kN0W9kKyuHefqRBvd/U75r9Sk2kQZ5+AQN4V95ebzKrQgtp2cwKj2FZAQxTSFHS1hsm9Y2BlCQH0kWQC2TlUyBzjKjRT/it/fygMymngaWHOErt8QYuLj5rjQCVe6b2x2x42MXM9f6GoXpZAriXpl4BrBzi2khXizg5hBa2NDy5lssr7ay1pUFiLJDl+NZSt5ZoHvb2JlxjnuRB38Cj3n/EPyqmC6LfYy5o3U9uqHzKfiRjIqZDi4hFb3ab0Mpn3LzXPvY3MBgUdE0pUgqiP2ykMO3DGcq7HBk514sQ9ZNKtQSBVw6wvQZ2pNmPnevcKzJhpAbx55n5GSBXgZpOH2ALmAepXOSHzmWpOrse8Q3XzvE2vCNsBKz0DKGXFPOvK8hXtA7i6IaCkXoK7G45BpAfwLSIOnTSurIRCbH8PEKhibqLo6S2sMx7ocfZ3LrnYFZIGTD0dsi9yCgF3C9lL18r3LA5FlJqVdpRYWd1b1YdCxnHHkL5W7o4IfcwKqWn2tk+zoTSDI51RI+DZCfrJ59TLcSNhBR4dzDPjzGnHIxyDetLbiVSldgobRJO4z/InlLF0qFZxq/o9LKsXqEVL1Z3A6TPB+hEmOZUjPH050j+NKu0sAuVglngPxusFqvm8ugUvpxnP/0IK8PNN6Ot2AqgK5hpovDteGkeQNxghvepqbrz7DECNIrnh3qGGhYCUJgHIdAl/Z1jqVoj2B5BwcWqWyYmuooSzA+OoGW9zqh/BfTx4O0KQ70wW3oYOG5iztbMNRh9JcF2CQjqAvWfxO4O9kRHmZEcRp8d7e/9iutfg/taMP9X9xxAB1SWHaMzL9k+wQbXTuI0veFsL6Qi/uXdua5Gx5gUh+VuBhfaag5j4sdOd+fXKTM3sUdagyRbwQpVRSCN8bkcUsgzl9ETooxDwbFPjGYWQFiHgK7HeCZyrqoJghyMAl5R1QhATzHyecorhL89DsNRco5DLsPqO9Nc3nkJwHaWcDMlK0s0tIngrTU+S53pz5nhRmc6QAWEHAl+vB1fncQC5OdbfDWusgWJ64N7SKUOMwGKGYf3DuJ9DvzeyyjqyKgaxv9AOyG3LEHfxeS0urQVKdgoZSjLZHt405hlvhYwikHZOQS45wPppYadqQox7Li4872yCXiYrJNOgkiw+M6A0k7dken+GjLh7pr9083yWcQ8Rd9yS32leMhgxfGmWvDE+tKOZBMrK/JgARCSlAmJFq2gVraJdWO2/87NTjPDRSvwAAAAASUVORK5CYII=" alt="logo" class="logo">
I have a Vue.js project, when I check the console found this issue bellow:
Refused to apply style from 'http://localhost:8080/dist/cropper.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I searchedSO, found a Angular related post, but it do not helps me, they are based on different frontend framework.
The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever.
To make sure you are in that case, copy the path and try to access it directly in a new browser window or tab. You will see what your server sends.
The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path.
The exact path and router configuration depends on how you have setup your project and the framework you are using.
You provided insufficient information. But i had the same problem, so i have a solution.
Say you #import css files in a component's style block. So my problem was in path that i specified. And the error message Refused to apply style appeared because of wrong path. I thought that my src path alias ~ is resolved in a style block, but it wasn't.
All i had to do is to specify /src/assets/css... instead of ~/assets/css...
I got exact same problem " Refused to apply style from 'http://localhost:8080/css/formatting.css' because its MIME type ('application/json') is not a supported stylesheet MIME type ..."
I browse through the window explorer and corrected the file paths (folders) as i intended to. There was also spelling error in the addressing like the path was as above (formatting.css or double 't') but the file actually was formating.css (single 't') and the problem solved. Some solutions are not expensive at all. Thanks.
yo have to change the place of your file css into the directory assets
assets/style.css
and then put these path in your file index.html src/index.html
<link rel="stylesheet" type="text/css" href="assets/style.css" />
in addition you have to modify to file angular.json in styles
"styles": [
"src/assets/style.css",
"./node_modules/materialize-css/dist/css/materialize.min.css",
],
It might also occur when you set incorrect BUILD directory in package.json. for example
// Somewhere in index.js
// Client Build directory for the Server
app.use(express.static(path.resolve(__dirname, '../this-client/**build**')));
then package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "cp src/assets/css/my-this-react.css **build**/my-this-react.css",
"build-package": "npm run build-package-css && babel src --out-dir **build**"
},
The directories I marked as Bold should be the same. If there is a difference then it won't run.
I encountered the same error when running my app in production. With npm run serve everything worked but the result of npm run build resulted in that same error. It turns out that I was using vue router in history mode and my nginx server wasn't properly configured.
I changed vue router to hash mode and stopped getting that error message. Try using hash mode and see if the message goes away. If it does then you need to tweak your web server settings.
I was dealing with the same problem with my React project, and the solution I found was to add a "publicPath" to the output in webpack.config.js.
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
},
I ran into this issue.. I was integrating some scss files into my project and just presumed that I should use the
rel="stylesheet"
<link href="/epic.scss" rel="stylesheet" type="text/css">
once I removed the attribute no more style sheet issues...
Working .scss file
<link href="/epic.scss" type="text/css">
in my case , I just changed the link tag from<link href="Content/charity/bootstrap-icons.css" rel="stylesheet"> to <link href="~/Content/charity/bootstrap-icons.css" rel="stylesheet">and it worked . just add ~
For my case (not for vue.js)
adding the "base" tag solved the error:
<head>
...
<base href="/">
...
</head>