Once I mount Vue to #app content disappears

bud
,
1

I believe I have added Vue3 successfully to my project except once I add the mount command to my app.js, the page content disappears.

My code example is at the bottom of this post, but when I mount to #app or `#main, all content rendered inside the mounted tag disappears. I was hoping to use this in the same way I mount to a Laravel app but clearly missing a step.

Page source with app.mount('#app')
(browser renders white screen)

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

Page source with `app.mount(‘#main’)
(Content inside main tag is removed)

<main id="main" class="main" data-v-app="">
<!---->
</main>

I notice the vue devtools don’t show unless I run yarn dev. When I do run yarn dev I get these two Vue warnings in the console. I installed vue with the bud extension and haven’t made any changes to my bud.config and really not sure how to add these env vars to a bud config (And am I using the correct build of vue?). Not sure if it’s relevant.

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags. runtime-core.esm-bundler.js:4952
[Vue warn]: 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". 
  at <App>

Here’s the important pieces of code adding vue.

app.js

import { createApp } from 'vue';
// import Example from './vue/Example';

const app = createApp({})
//app.component('example', Example);
app.mount('#app'); // deletes blade template content
// app.mount('#main'); // also deletes content

package.json

devDependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@popperjs/core": "^2.11.5",
    "@roots/browserslist-config": "^6.3.3",
    "@roots/bud": "6.3.3",
    "@roots/bud-sass": "6.3.3",
    "@roots/bud-vue": "6.3.3",
    "@roots/sage": "6.3.3",
    "bootstrap": "^5.1.3",
    "@roots/wordpress-hmr": "^6.3.3"
  }
2

I have found the follow posts that mention using a different build because of this error. Based on the posts below, I have added the following to my bud.config.mjs

.alias('vue', app.path('@modules/vue/dist/vue.esm-bundler.js'))

Everything renders properly except I have one warning remain. How do I define the flags below using bud config?

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.
3

Thanks for pointing out the solution with the alias!

For everyone who is looking for a solution to the feature flags. You can use define to provide the flags:

  .define({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
  })
4

I’lll look into adding this alias to core along with the define call (thank you @Dathix and @nbyloff)

Do y’all know if those feature flags should be defined for Vue 2 as well? Sorry, I’m not a vue user, but just want to support as best I can.

Thanks for using it and sharing actionable feedback.

5

Sorry I switched everything off Vue2 so not sure.