I'm having some issues with caching my files using the default service worker that comes with VueCLI 3. I would prefer to just use the default browser caching mechanism, but can't seem to disable the PWA plugin as its not in the vue.config.js file. Passing a blank object to the pwa option doesn't work either as the object is merged and not overwritten.
I resolved this by doing the following:
Removing the registerServiceWorker.js file
removing the import of registerServiceWorker.js from main.js.
removing the PWA plugin from the devDependencies in package.json.
Vue enabled a method to disable pwa for certain builds in version 4. Now you can add --skip-plugins pluginname during your build. This one worked for me just fine:
npx vue-cli-service build --skip-plugins pwa,workbox
Ref: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins
There is an open but accepted proposal to add this to the core functionality:
https://github.com/vuejs/vue-cli/issues/3830
EDIT:
Via command line:
https://cli.vuejs.org/guide/cli-service.html#skipping-plugins
npx vue-cli-service build --skip-plugins pwa,workbox
Via vue.config.js:
module.exports = {
chainWebpack: config => {
config.plugins.delete('pwa');
config.plugins.delete('workbox');
}
}
Related
I have followed the official Tailwind + Nuxt documentation to add Tailwind to Nuxt. I have done so for 2 new Projects and 1 existing Nuxt project. And it works fine for the first 2 projects, but...
The existing Nuxt project is giving me a hard time now as it seems to ignore the tailwind.config.js file.
Tailwind works but it is using the default config, no matter what changes I make to the config file. Nuxt also does not hot-reload when changes are made to the config.
My IDE on the other hand detects the changes and offers them as IntelliSense auto-complete option.
I am pretty lost and not sure where to start troubleshooting. Happy to share the repo if that helps.
Any help greatly appreciated. Thanks!
-- Miss J
Did you register tailwindcss in the buildModules of the nuxt.config.js (and not modules) ?
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss'
],
Can you add some of your code to help troubleshoot ?
package.json
nuxt.config.js
tailwind.config.js
What are you trying to change inside the tailwind config ?
The Nuxt module for Tailwind CSS is using v1.9.6 and not the latest v.2.0.3, so some things you try to change in your config file following the docs are maybe not possible with the current nuxt package.
You can upgrade to latest Tailwind version :
https://stackoverflow.com/a/30650609/13541914
yarn add --dev tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
All I did was add a tailwind.config.js file.
Hope it helps
I am new to vue and I started a project from scratch.
I needed to install vuetify. However, I realized that I do not have webpack.config.js and vue.config.js.
Do I need to install it using npm or can I just directly make these config files manually?
Can help me how do I add this config files?
If you created your app with the cli, until you want to add your custom config, you do not need to add those files.
If you need to add your custom configurations for webPack, you can manually create a vue.config.js and put there the setting for webPack, as explained in detail here.
Is webpack configured automatically in the vue create hello-world generated project? Is any loader included by default? Like css-loader?
Yes, it is. you can run vue-cli-service inspect to check the webpack config. For more information Inspecting the Project's Webpack Config
I had follow the reference : https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories, but it does not work
I want to disable it, because I have many warning when run npm run serve about extra semicolon, spaces etc
My project using vuetify
I make .eslintignore and add script like this :
../src/*.js
I try to run npm run serve, but the warning is still exist
I try to add :
"eslintIgnore": ["store.js", "Home.vue"] in the package.json, but it also does not work
Whereas I had follow the docs
How can I solve this problem?
Update :
I try change like this :
src/**/*.js
src/**/*.vue
It does not work
Eslint lint is a javascript opensource for linting utility. When you install a project using Vue cli, it automatically adds eslint-plugin to your project. It will have a es6 syntaxes guidelines, You can also create or disable the eslint rules.
If you want to disable eslint for a single line
just append this to a line of code
javascript code // eslint-disable-line
If you want to disable eslint for a complete file
/* eslint-disable */
code
/* eslint-disable */
If you want to remove eslint completely from a project which is
created by vue cli 2
Set useEslint: false, in config/index.js
If you are using vue cli 3
In .eslintrc.js just set
root: false
Else, if you want to remove eslint completely from project
npm remove #vue/cli-plugin-eslint
If you have .eslintignore, you can add these lines there
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/000-xyz/
I am not familiar with packing frontend projects. When I was writing frontend, we just used JQuery. So the problem is now I have a project created by vue-cli and packed by webpack.
But as I don't want to load libraries from my local server but from remote CDN. How should I change the yarn add dependencies into CDN based form during yarn build? What is the correct way to do this kind of packing?
I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section. But that's difficult to manage.
1. update your public/index.html adding the vue script source for the cdn (preferably in the head)
<script src="https://cdn.jsdelivr.net/npm/vue#2.6"></script>
2. create a vue.config.js file in the project root with the following configuration. (if you already have the file, add configureWebpack block to it)
module.exports = {
configureWebpack: {
externals: {
Vue: "vue"
}
}
};
this will flag the Vue dependency as a global, and not add it into the vendor bundle. You can do the same with other dependencies like element-ui, vuetify, vuex, etc...