Vue components on demand - [Vue warn]: Cannot find element

Question

I am working on a php/laravel project that requires using some vue components in some areas. Currently, my vue component looks as follows:

import Vue from 'vue';

import Notification from "./components/Notification.vue";

window.onload = function () {
   var main = new Vue({
      el: '#my-app',
      components: { Notification }
   });
}

However, on pages where I do not have a #my-app element I am getting the following error:

[Vue warn]: Cannot find element: #my-app

Is there a way to prevent this warning? Another way to ask this is, is there way to use my notification component on pages where I need it by creating a #my-app element and not have a #my-app element altogether on pages were I do not need it?

Or if I understand this correctly, I need a root #my-app element regardless of if I'm using the Notification component?

Why are you using `window.onload = function () {}` to wrap the vuejs instance? — samayo, Nov 15 '17 at 15:42
Because I ran into this issue: https://stackoverflow.com/questions/29484431/vue-warn-cannot-find-element/29484590 — AnchovyLegend, Nov 15 '17 at 15:45

score 1 · Answer 1 · answered Nov 15 '17 at 15:46

You can dynamically create an element with id my-app, before mount Vue.

import Vue from 'vue';

import Notification from "./components/Notification.vue";

var myAppElement = document.getElementById('my-app');

if (!myAppElement) {
   var newMyAppElement = document.createElement('div');
   newMyAppElement.setAttribute('id', 'my-app');
}

window.onload = function () {
    var main = new Vue({
    el: '#my-app',
    components: { Notification }
});

score 1 · Answer 2 · answered Jun 21 '19 at 07:58

I solved by this way. I only instance Vue when #app it's detected:

//only use Vue when #app detected
window.onload = function () {
    var app = document.getElementById('app');
    if (app) {
        const app = new Vue({
            el: '#app',
        });
    }
};

score 0 · Answer 3 · answered Jun 21 '19 at 08:04

It's simple create an element then mount the component to that element.

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('notification'))
  const app = new Vue({
    el,
    render: h => h(Notification)
  })
})

Vue components on demand - [Vue warn]: Cannot find element

3 Answers3