While working with multiple Vue JS projects (Vue 2 & Vue 3), it is recommended to use a different extensions based on the version your using.
Vue 2 = Vetur
Vue 3 = Volar
Is there a way to auto-enable/disable these extensions from either settings.json or vscode itself?
maybe something like:
// settings.json
{
"extensions": {
"Vetur": false,
"Volar": true,
}
}
You can actually - if you go into the extension settings, you have an option to enable/disable just for the current workspace:
Related
In one of my projects, I build a nice vue3 component that could be useful to several other projects. So I decided to publish it as an NPM package and share it with everyone.
I wrote the isolate component, build it and publish BUT I use Tailwind css to make the style.
When I publish and install the component everything is working BUT without the beauty of the css part.
I tried several configurations and alternative tools to generate the package that automatically add the tailwind as an inner dependency to my package.
Does someone have experience with this? how can build/bundle my component by adding the tailwind CSS instructions into it?
You're almost there
Since you've got your component working, the majority of the part has been done.
For configuring the styling of the component you need to identify the Tailwind CSS classes being used by your Vue component package and retain them in the final CSS that is generated by the Tailwind engine in your project.
Follow below steps in the project where you want to use your tailwind vue component package.
For Tailwind CSS V3
// tailwind.config.js
module.exports = [
//...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}" // Add this line
// Replace "package-name" with the name of the dependency package
],
//...
]
For Tailwind CSS V2
// tailwind.config.js
module.exports = [
//...
purge: {
//...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}" // Add this line
// Replace "package-name" with the name of the dependency package
],
//...
//...
}
]
The content property in the tailwind.config.js file defines file path pattern that the tailwind engine should look into, for generating the final CSS file.
For Pro users
You may also try to automate the above setup by writing an install script for your npm package to add this configuration to the tailwind.config.js file
References
Tailwind Docs - 3rd party integration
It's a bit difficult for someone to answer your question as you've not really shared the source code, but thankfully (and a bit incorrectly), you've published the src directory to npm.
The core issue here is that when you're building a component library, you are running npm run build:npm which translates to vue-cli-service build --target lib --name getjvNumPad src/index.js.
The index.js reads as follows:
import component from './components/numeric-pad.vue'
// Declare install function executed by Vue.use()
export function install (Vue) {
if (install.installed) return
install.installed = true
Vue.component('getjv-num-pad', component)
}
// Create module definition for Vue.use()
const plugin = {
install
}
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null
if (typeof window !== 'undefined') {
GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue
}
if (GlobalVue) {
GlobalVue.use(plugin)
}
// To allow use as module (npm/webpack/etc.) export component
export default component
There is no mention of importing any CSS, hence no CSS included in the built version.
The simplest solution would be to include the index.css import in your index.js or the src/components/numeric-pad.vue file under the <style> section.
Lastly, I'm a bit rusty on how components are built, but you might find that Vue outputs the CSS as a separate file. In that case, you would also need to update your package.json to include an exports field.
We have a pretty standard Vue CLI environment. It currently ingests a vue plugin we created via the install method. The plugin is also a Vue CLI environment and lives as a git submodule in the repo.
Currently the parent uses sass and sass-loader packages to transpile. It's configured in the vue.config.js settings, like so:
module.exports = {
// Other properties and settings removed to simplify
css: {
loaderOptions: {
sass: {
data: `
#import "#/styles/global.scss";
`
}
}
}
The global.scss just houses all our style includes.
The plugin is set up in a similar way, but none of the code is getting ingested into the parent. Which totally makes sense, as there is nothing importing/building the plugins style files. Anyone know how to import and transpile plugin sass style sheets? Thank you!
I'm using Nuxt with Vuetify.
I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for.
the class is on container element so the final html looks like
<div class="container container--fluid my-class">
the devtools look like that when I'm on dev mode:
so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects.
How can I fix it?
After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.
I followed these steps: https://stackoverflow.com/a/60925793/9103301
which is basically integrating Vuetify into nuxt manually and not with #nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).
a more basic vuetify plugin that worked for me:
import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)
export default (ctx) => {
const vuetify = new Vuetify({
theme: {
dark: false, // From 2.0 You have to select the theme dark or light here
},
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
You'll have to install icons as well, vuetify default is mdi which is installed with npm install #mdi/font -D
managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:
buildModules: [
["#nuxtjs/vuetify", { treeShake: false }],
],
I am using Visual Studio Code with a React Native project. ESLint is used to check the stuff specified in the .prettierrc.js.
When something isn't correct I get a hint like this:
Instead of getting these notifications and right clicking on them, selecting Fix this prettier/prettier problem, I want the problems to be fixed either automatically or using a shortcut combination. How can I configure that? I am currently using pure JavaScript, no Typescript.
Edit/create .vscode/settings.json so it will contain
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Fixes issues on save.
Thanks for #jonrsharpe! Just want to add my few cents.
Go to settings.json file:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
Add there:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Restart VSCode
Enjoy coding!))
UPDATE
While on Mac the solution above worked for me, on Windows to make it works I had to add following to settings.json :
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll": true
},
"eslint.autoFixOnSave": true
I am trying to setup this feature from tutorial:
https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md
but got an error
"C:\Users\User\AppData\Local\Programs\Microsoft" не является внутренней или внешней, исполняемой программой или пакетным файлом.
Could not open LeadsEdit.vue in the editor.
The editor process exited with an error: (code 1).
To specify an editor, sepcify the EDITOR env variable or add "editor" field to your Vue project config.
in my vue.config.js (project based on vue cli 3.0)
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('code'))
}
}
}
UPD. Without this code the problem still remain.
UPD2.
I am trying to set EDITOR variable in .env file
VUE_APP_EDITOR=/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe
Or with vue.config.js
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
}
}
}
But the problem still remains
What may cause this problem?
How can I fix this error?
It seems like dev tools is trying to open the editor executable C:\Users\User\AppData\Local\Programs\Microsoft, which is most likely wrong. The default install location on Windows 10 is (to the best of my knowledge) C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe.
launch-editor tries to find the editor from the currently running processes and falls back to the environment variables EDITOR and VISUAL (see https://github.com/yyx990803/launch-editor#why), so you can probably set the EDITOR env var to the correct path.
Probably, there are quotes missing around the editor config so it gets cut off at the first space. I don't really know where the path comes from, either you configured it via environment variables or in your vue project config.
Based on the information in your updated question, you could try this:
I don't know where the variable name VUE_APP_EDITOR comes from, but I guess it should be EDITOR. Change it to EDITOR and see what happens
The path you are using looks wrong (i.e. not like a windows path). Try c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe instead.
E.g.:
app.use('/__open-in-editor', openInEditor('c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
You can test whether the path is correct by starting a cmd shell and entering the path. If it is correct, VS Code should open. If not, it will tell you the path was not found.
Also have a look at this, there is some more on how to integrate vue devtools & VS Code: https://gist.github.com/moreta/d3989686b6a1f2416b5802cac8df16b4