Roots Discourse

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:

config.entry({
      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!

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"

Error:

Highly appreciate any hints :pray:

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:

<template>
  <div>
    {{ msg }}
  </div>
</template>

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

which is being imported into app.js:

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

const app = createApp(HelloWorld);
app.mount('#hello-world');

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.entry({
  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:

./resources/scripts/hello-world.vue
  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>
</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.

Thanks!

2 Likes