Hi guys,
I have added Vue to my Sage 10 theme using “bud-vue”, everything is good in dev mode.
After compiling the assets using “yarn build”, it’s like everything inside <main id="main" class="main"> breaks, showing nothing of its content.
My current devDependencies:
"devDependencies": {
"@roots/bud": "6.11.0",
"@roots/bud-babel": "^6.11.0",
"@roots/bud-tailwindcss": "6.11.0",
"@roots/bud-vue": "^6.11.0",
"@roots/sage": "6.11.0",
"browser-sync": "^2.28.3",
"browser-sync-webpack-plugin": "^2.3.0"
},
Here is the app.js:
import domReady from '@roots/sage/client/dom-ready';
import {createApp} from "vue";
import App from "./components/App.vue";
/**
* Application entrypoint
*/
domReady(async () => {
// ...
});
/**
* @see {@link https://webpack.js.org/api/hot-module-replacement/}
*/
import.meta.webpackHot?.accept(console.error);
createApp({
// Every vue component has to be imported here in order to be available
// in every template.
components: {App}
}).mount("#main");
My App.vue component:
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
msg: {
type: String,
}
})
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<h3>Here is the message prop: {{ props.msg }}</h3>
<button @click="increment" class="bg-blue-400 px-10 py-3">Count is: {{ count }}</button>
</template>
No modifications to the bud.config.js
The weird thing is that I don’t see any error in the console. Any error would help but there are no error messages.
What am I doing wrong?
Cheers
.