@roots/bud-vue

Vue support can be added by installing the @roots/bud-vue package.

Installation

npm

npm install @roots/bud-vue --save-dev

Yarn

yarn add @roots/bud-vue --dev

pnpm

pnpm add @roots/bud-vue --save-dev

Usage

Once installed, vue should be ready to use in your project. The extension is pre-configured to support Vue 3 single file components (runtime only).

Disabling runtime only

You can disable the runtimeOnly default by adding the following to your config:

export default async bud => {
  bud.vue.setRuntimeOnly(false)
}

Language support

Developers using JS may wish to consider installing @roots/bud-babel to handle code transforms that are not specific to vue.

For typescript language support, install @roots/bud-typescript as a peer dependency.

For scss support, install @roots/bud-sass as a peer dependency.

Legacy support

If you are trying to configure @roots/bud-vue for use with Vue 2 you will need to install a version of vue tagged legacy and a compatible version of the vue-loader and vue-template-compiler packages.

If a custom version of vue is included in the project package.json the extension will automatically detect it and configure itself accordingly.

This is the package.json we use to test releases for vue 2 compatibility:

package.json

{
  "name": "@examples/vue-legacy",
  "$schema": "https://bud.js.org/bud.package.json",
  "private": true,
  "type": "module",
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "devDependencies": {
    "@roots/bud": "workspace:*",
    "@roots/bud-vue": "workspace:*"
  },
  "dependencies": {
    "vue": "2.7.16",
    "vue-loader": "15.11.1",
    "vue-template-compiler": "2.7.16"
  }
}

Example