I was trying to setup sage 10, which after a little bit of trial and error went fine. However when trying to setup vue with it I ran into a roadblock. I installed vue with this link @roots/bud-vue | bud.js
What do I need to do now? It feels like there’s a massive hole left in the documentation.
Hi @Kruks, welcome!
We’re using Sage 10 and Vue 3, and although I don’t have an example ready to share with you, hopefully the following will help…
One of the great things about bud and bud-vue is it just works out of the box. There’s no Sage / Bud-specific hole in the documentation at all. In your ./resources/scripts/app.js file, you’re all ready to go. Just import your components, and any helper you need from vue, like createApp, and then kick it all off once the DOM is ready…
import domReady from '@roots/sage/client/dom-ready';
import { createApp } from 'vue';
import MyVueComponent from './components/MyVueComponent.vue';
domReady(() => {
const app = createApp(MyVueComponent);
app.mount('#mountpoint');
});
import.meta.webpackHot?.accept(console.error);
Does that help at all, or have I missed the point?
Thanks for the help Talss89. I guess my question now is how would I use these components in blade templates, is there anything else I need to do? My apologies if this sounds basic, I never did something like this.
No problem, and it’s a good question. Unfortunately there are a number of right answers, and it’s down to you to decide on what fits your use-case best.
One thing is always true: you’re going to want to load the JS, and mount the Vue app to an element.
Whether you use lazy loading, split your application into chunks or just load one big monolithic bundle and conditionally mount is up to you.
But, have a look at using the @js Blade directive, if your objective is to keep the JS / Vue logic associated with a particular Blade component in the same file.
Sorry to piggyback on this but I’m in the same pace sort of right now.
Here’s my app.js
import { domReady } from '@roots/sage/client';
import 'bootstrap'
import { Fancybox } from '@fancyapps/ui'
import 'jquery';
import 'masonry-layout'
import 'tether'
import Flickity from 'flickity';
import fizzyUIUtils from 'fizzy-ui-utils'
import { createApp } from 'vue'
import inDepth from './in-depth'
/**
* app.main
*/
...
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
domReady(() => {
const app = createApp(inDepth);
app.mount('#app');
});
import.meta.webpackHot?.accept(console.error);
my component:
export default {
template: <div>count is 10</div>
}
and my blade template
<h1>Hi there</h1>
<div id="app"></div>
When I run this I get a Can't find variable React Reference error? Is there something I’m missing?
All of these are kind of confusing, while I barely get the point, I can’t convert it to working code. Is there maybe a way we could have a short 1 on 1 call. You seem to know a lot about sage, I on the other hand am barely keeping my head above water 
Hi @Kruks - There are many other people with much more experience with Sage and the Roots ecosystem than I have, so if you have a specific question, the best thing to do would be to post it here with a detailed explanation and reproducible example, or perhaps support Roots with a sponsorship and reach out to the Discord community. Happy to talk though, I’ll DM.
Let’s leave this thread now to save going off-topic.
Sure thing, we can continue in DM’s, I’ll mark this as done.
I am actually trying to add Vue as well and running into this issue after installing @roots/bud-vue when I try to run bud dev:
These are my other dependencies:
Any thoughts?
See Problem with bud dev/build with bud sass
Your @roots/bud-vue version does not match @roots/bud
Thanks for the quick answer and support! Using same version fixed it, many thanks! 
