VueJS is impossible to set up

[UP-MDK]

Hey guys,

i have been working a lot with Next.js but occasionally have projects that need to be in Vue.

Everytime i use Vue.js, i skip using Eslint and Prettier or accept that most files are marked as "red" because of error messages that are in fact no errors in Vue.

I would want to ask, if there is any guideline or tutorial on how to properly set up Vue.js with the regular tech-stack (Typescript, Eslint, Prettier) or if it is just not supported.

I have been trying to set it up every now and again for a long time now and was never successful.

So far i have tried the following:

• Using the CLI and enable typscript, eslint, prettier out of the box
• Using Vite to try and setup Vue custom without the CLI

Either way, i end up with:

• Prettier not working or formatting Vue files like absolute broken chaos
• Neither Prettier, nor Eslint working at all
• Typescript never getting integrated properly (lots of error messages that are no errors in Vue)

I have the following VS Code extensions for Vue:

• Vetur
• Vue (Official)
• Vue language features (Volar)

I have absolutely no struggles setting up the entire tech-stack in any other environment.
For some reason, i just can't do the same in Vue. Googling or trying AI as assistance does not help either.

Since Vue is used by many people, i am really really curious how other people are actually using it, because for me it does not work the way i would expect it to.

Thanks!

[Deluxe8841]

Have you read this: https://code.visualstudio.com/docs/nodejs/vuejs-tutorial? Did that help?

[UP-MDK]

Yes, but it doesn't really help me with Typescript and prettier. In fact, this tutorial does not use either of these.
I have the Vue (official) extension installed, but no full support for Vue together with Typescript.

[shaan-Mx]

Official recent bug with version 3.1.4
vuejs/language-tools#5756

[ismaildasci]

i had same frustration before. the problem is extension conflicts.

fix:

1. disable Vetur completely - its for vue 2 and conflicts with vue 3
2. only keep "Vue - Official" extension (this is the new one, replaces volar)
3. remove "Vue language features (Volar)" - its merged into Vue Official now

so you should only have ONE extension: Vue - Official

for eslint/prettier:

use the new @vue/eslint-config-prettier:

npm create vue@latest my-app
# select yes for typescript, eslint, prettier

this sets up everything correctly. the cli now uses flat eslint config.

your eslint.config.js should look like:

import pluginVue from "eslint-plugin-vue"
import vueTsEslintConfig from "@vue/eslint-config-typescript"
import skipFormatting from "@vue/eslint-config-prettier/skip-formatting"

export default [
  ...pluginVue.configs["flat/recommended"],
  ...vueTsEslintConfig(),
  skipFormatting,
]

in vscode settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

the key is removing vetur and old volar. vue ecosystem changed a lot recently

[UP-MDK]

Very nice! It took me a while to figure out the thing with Vetur and Volar being for Vue 2.
Nice to have a place to come back to next time, so thanks a lot for answering.
Maybe it will help others as well