How does one go about adding Vue Components in sage10.0.0-beta.2

I’ve noticed laravel-mix is out, and we’re using @roots/bud now. Cool! I saw that there was some documentation how install @roots/bud-vue, but I am kind of lost after that. Do I still need to add Vue components to my entrypoints in bud.config.js?

These are the Vue related packages I’ve installed:
@roots/bud-vue”: “^5.0.0”,
@vue/compiler-sfc”: “3.2.26”,
@vue/runtime-dom”: “3.2.26”,
“vue”: “^3.2.26”

I someone can help me out with something like an example of their bud.config.js and how they imported Vue in app.js, that would be greatly appreciated! Thanks!

(this is my first post here, I hope I provided enough information, otherwise let me know)

Welcome! Is the Vue example from the Bud codebase helpful?

Thank you for you response Ben! When applying the codebase example to my current sage config, would this be an ok way to go about it:

      app: ['scripts/app.js', 'vue/app.vue', 'styles/app.css'],
      editor: ['scripts/editor.js', 'styles/editor.css'],

This is what I get when I run yarn bud build (it gets stuck):

This is what I get when I run yarn bud dev:

And I assume I still need to do Vue.createApp()and .mount()it to an element? Where would I do that the best?

Sorry for all the questions, I really love sage and have used sage9 a lot, I just want get myself ready for sage10 :slight_smile: Thank you for your help!

1 Like

I’m stuck at the same point. Trying to build a couple of vue components for my site. However, I get the exact same same errors as @douwepausma.

I also added app.vue to the bud config, added app.vue to theme/resources/vue/app.vue. And I added following devDependencies to to package.json:

"@roots/bud-vue": "^5.1.0",
"@vue/compiler-sfc": "3.2.26",
"@vue/runtime-dom": "3.2.26",
"vue": "3.2.26"


Highly appreciate any hints :pray:

1 Like

I’m happy to work on this with y’all till you’re up and running. I’m not an expert on vue, fair warning, but I do have a kind of general JS knowledge. Bear with me :slight_smile:

Three things that could help me out:

  1. Knowing where y’all are coming from. My understanding is that a lot has changed between vue 2 and vue 3. Bud’s support is for vue 3, since that seems to be the standard for new projects. Do y’all have experience with vue 3 vs vue 2? Am I correct in this take on the vue ecosystem?

  2. If someone would be kind enough to make a super minimal repo of sage kitted with all the vue features they would like supported that would probably be better than me just making up components in a framework I’m not super familiar with.

  3. Lastly, making an issue on github would be the absolute best thing to help get stuff ironed out – the issue form will ask you for particular files which will help me see what is happening during your builds and what output they are generating for webpack.

What I’ve got working

Right now I have an SFC @ ./scripts/hello-world.vue:

    {{ msg }}

export default {
  data: () => ({msg: 'Hello world!'}),

which is being imported into app.js:

import HelloWorld from './hello-world.vue';
import {createApp} from 'vue';

const app = createApp(HelloWorld);

and then i’ve thrown the html mount point into ./layouts/app.blade.php:

  <div id="hello-world"></div>

My bud.entry call (bud.config.js) is as simple as possible:

  app: ['scripts/app.js'],

My install process was:

yarn add @roots/bud-vue --dev

# yarn bud install will add peer dependencies with the 
# version required by extensions
yarn bud install

yarn install

When I build the project everything seems okay. I can see “hello world” emitted from by the component in the browser and the asset in the cli output:

asset app.1d6a70.js 53.1 KiB [emitted] [immutable] [minimized] (name: app)

Running in dev presents me with this error:

  1:0  error  Parsing error: This experimental syntax requires enabling one of
the following parser plugin(s): "jsx", "flow", "typescript". (1:0)

Which is eslint. I looked it up and realized I needed eslint-plugin-vue in order to fix that.

yarn add eslint-plugin-vue --dev

And added it as a value to the extends prop in .eslintrc.js:

extends: [..., 'plugin:vue/vue3-recommended'],

And everything seems ok:

<div id="hello-world" data-v-app="">
  <div>Hello world!</div>

I doubt the @roots/bud-vue implementation is perfect and I can see that the vue ecosystem is super diverse. Knowing more about what application code you’re using (a minimal repo containing some of the vue features you’re using), and what your build is doing (github issue) would go a long way to helping me improve the extension.



There were two pieces of information that helped me get through this:

  1. There was a key thing I missed after running yarn bud install, which was running yarn install. That threw an error not knowing which eslint to link to (package.json had both eslint and bud-eslint)
  2. Removing the regular eslint, and re-running yarn install again fixed everything up.

From here, I followed @kellymears advice to add the eslint-plugin-vue, and everything was good.

1 Like

A quick note on the eslint-plugin-vue setup:

extends: […, ‘plugin:vue/vue3-recommended’],

I found that vue3-recommended was a real bear to use, so for those looking for a slightly less intense linting experience, you can use 'plugin:vue/vue3-essential'

source: User Guide | eslint-plugin-vue


I am getting this error on several new sites (barebones sage 10 with bud 5.2) after installing @roots/bud-vue.

I just cant figure out the problem. Any ideas?

You were able to fix it?

Unfortunately, no. It is not fatal, though.

@kellymears I followed your isntrucitons and im getting “Error importing @roots/bud-vue” on yarn dev and yarn build

  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config/current"
  "engines": {
    "node": ">=16.0.0"
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  "devDependencies": {
    "@roots/bud": "6.3.3",
    "@roots/bud-tailwindcss": "6.3.3",
    "@roots/bud-vue": "^6.4.3",
    "@roots/sage": "6.3.3"
  "dependencies": {}


import {domReady} from '@roots/sage/client';
import HelloWorld from './hello-world.vue';
import {createApp} from 'vue';

 * app.main
const main = async (err) => {
  if (err) {
    // handle hmr errors

  // application code
  const app = createApp(HelloWorld);

 * Initialize
 * @see

after running yarn bud doctor, i saw @roots/bud-vue is not running on the same version as bud core. bud is on 6.3.3 but @roots/bud-vue is on ^6.4.4.

I downgraded @roots/bud-vue to v6.3.3 and now it works.