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.
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
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 did some research, but could not find a quick fix to this situation:
Vue-cli 3.4.0 - Webpack 4.29.0
My project does not have config/index.js as mentioned here.
I tried to open vue.config.js and disable eslint does not work.
I removed the cli-plugin-eslint package.
Don't have .eslintrc.js.
Could not find any other configuration about eslint in project.
--- Fix ---
I realize that I didn't control my settings well. It was built in vetur.
the easiest way to ignore eslint is to ignore the files you dont want to be linted. For example, create .eslintignore in your project root folder. then just add the following folder which you dont want to lint like,
add src\
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');
}
}
I have recently included Angular 2 in my project. After setup, facing issue for namespace webdriver. On Google I found the solution here. But here it is asking to execute below npm command.
npm install #types/selenium-webdriver#2.53.36 --save-dev
Now, I want to know, where I will execute this above command, so that the required files will get included in my project.
Inside the VS IDE, I haven't found any console area like as for nuget, where I execute the command and files get included in project.
Please help.
add a nmp configuration file
add all of the #angular dependencys that you will be needing
add system.config file in the root of the project
add tsconfig.json to the root of the project
add tslint.json to root of project
then add your app.component .module .route and other files.
in system.config.js add your #angular/core and others like
'#angular/core': 'npm:#angular/core#2.1.1/bundles/core.umd.js'
after doing this your can run your project and your _layout page is where you will add all of your <script> and other angular files.