Vetur

# Setup

# Extensions

# VS Code Config

  • Add vue to your eslint.validate setting, for example:

    "eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
]

# Project Setup

  • At project root exist package.json file, Vetur use it for infer vue version and get component date.

  • At project root create a jsconfig.json or tsconfig.json that include all vue files and files that they import from, for example:

  • jsconfig.json

      {
    "include": [
      "./src/**/*"
    ]
  }

  • tsconfig.json

      {
    "include": [
      "./src/**/*"
    ],
    "compilerOptions": {
      "module": "es2015",
      "moduleResolution": "node",
      "target": "es5",
      "sourceMap": true,
      "allowJs": true
    }
  }

  • What is a tsconfig.json (opens new window)

  • Reference (opens new window)

# jsconfig vs tsconfig

  • Use tsconfig for pure TS project.
  • Use jsconfig for pure JS project.
  • Use jsconfig or tsconfig with allowJs: true for mixed JS / TS project.

# Path mapping

If you are using Webpack's alias (opens new window) or TypeScript's path mapping (opens new window) to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json.

For example:

└── src
    ├── components
    │   ├── a.vue
    │   └── b.vue
    ├── containers
    │   └── index.vue
    ├── index.js
    └── jsconfig.json

jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "components/*": [
                "src/components/*"
            ]
        }
    }
}

index.vue

import a from 'components/a.vue'
import b from 'components/b.vue'

# Typescript

You need to add a shim type file for import vue SFC in typescript file.

# Vue2

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

# Vue3

// shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

# Advanced

If you use monorepo or VTI or not exist package.json and tsconfig.json/jsconfig.json at project root, You can use vetur.config.js for advanced setting.

Please add vetur.config.js at project root or monorepo project root.

// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true
  },
  // **optional** default: `[{ root: './' }]`
  // support monorepos
  projects: [
    './packages/repo2', // shorthand for only root.
    {
      // **required**
      // Where is your project?
      // It is relative to `vetur.config.js`.
      root: './packages/repo1',
      // **optional** default: `'package.json'`
      // Where is `package.json` in the project?
      // We use it to determine the version of vue.
      // It is relative to root property.
      package: './package.json',
      // **optional**
      // Where is TypeScript config file in the project?
      // It is relative to root property.
      tsconfig: './tsconfig.json',
      // **optional** default: `'./.vscode/vetur/snippets'`
      // Where is vetur custom snippets folders?
      snippetFolder: './.vscode/vetur/snippets',
      // **optional** default: `[]`
      // Register globally Vue component glob.
      // If you set it, you can get completion by that components.
      // It is relative to root property.
      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
      globalComponents: [
        './src/components/**/*.vue'
      ]
    }
  ]
}

# Yarn pnp

Vetur support this project now, but have some limits.

  • Don't mix common project and pnp project in multi-root/monorepo
  • Prettier don't support yarn pnp, so can't load plugin automatic.

← Syntax Highlighting →