# Once I mount Vue to #app content disappears

**URL:** https://discourse.roots.io/t/once-i-mount-vue-to-app-content-disappears/23602
**Category:** bud
**Tags:** bud, sage10
**Created:** 2022-07-23T15:38:32Z
**Posts:** 5

## Post 1 by @nbyloff — 2022-07-23T15:38:32Z

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"
  }
```

---

## Post 2 by @nbyloff — 2022-07-23T23:42:11Z

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.
```

> <https://stackoverflow.com/questions/64108656/createapp-mountapp-clears-apps-child-elements-in-vue3>

> <https://stackoverflow.com/questions/64457284/vue-runtime-esm-browser-js-does-not-render-vue-3-components/64458612#64458612>

---

## Post 3 by @Dathix — 2022-10-12T09:47:03Z

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](https://bud.js.org/docs/bud.define) to provide the flags:

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

---

## Post 4 by @kellymears — 2022-10-18T21:44:23Z

> [@nbyloff](#):
>
> `.alias('vue', app.path('@modules/vue/dist/vue.esm-bundler.js'))`

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.

---

## Post 5 by @nbyloff — 2022-10-19T02:49:49Z

Sorry I switched everything off Vue2 so not sure.