Running into some very strange issue with bud-vue and Sage 10.
I have just updated Acron on the project to version 3.1.
When running yarn dev to build the assets, vue components are not loading. When I look in the console I get this warning from Vue:
Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
The strange thing is, this is using the latest version of bud-vue, which is 6.11.0.
In the documentation for bud-vue, they stipulate that runtime compilation is set by default:
"The extension is pre-configured to support Vue 3 single file components (runtime only)."
All my other node packages are up to date and are set to the latest releases matching that of bud-vue
package.json
"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"
},
I have tried the following to solve the issue, firstly manually declaring bud-vue to use template compilation with:
app.vue.set('runtimeOnly', true)
And trying to set an alias for vue to use the correct runtime bundler (which was needed in prior versions of bud-vue):
.alias('vue', app.path('@node_modules/vue/dist/vue.esm-bundler.js'))
Though nothing seems to be working. It's almost like the config options are not reflecting....
If anyone has any insights, or has run into this problem and has solved it, I would really appreciate some help and guidance.
This has been sovled:
For bud-vue, the default is runtimeOnly set to true. This bundles the ‘runtime only’ version of Vue 3 (ie. no template compiler).
To include the full bundle, use:
app.vue.set('runtimeOnly', false) No alias is required - you can remove that from your bud.config.js.
In the documentation for bud-vue, they stipulate that runtime compilation is set by default:
“The extension is pre-configured to support Vue 3 single file components (runtime only).”
There is confusion here, as the warning generated by Vue is referring to ‘runtime compilation’, which is very similar terminology to ‘runtime only’.
Remember to clean your build after changing these settings - yarn run bud clean or yarn dev --force.
Link to actual answer: