CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Colibri
Colibri

Reputation: 1195

Why is Vue not initialized?

I have a Rails application. Sometimes on the pages I place Vue components. It can be as simple dynamic lists. But there can also be a more complex implementation with many components nested in each other.

First, I'll show you how it all works (code).

Part of the code from the main layer in a Rails application:

body
  #app
    = yield

And part of the code from JS:

if (document.getElementById('app')) {
  new Vue({
    el: '#app',

And now about the problem.

Sometimes, when I open the browser, then I loaded the page without Vue components. This issue is equally relevant in macOS Chrome / Safari and iOS Safari. But if I manually reload the page, then everything is fine.

What could be the problem? Why does the browser quickly load a page after launch (probably from a cache?) and reacts poorly to Vue?

Upvotes: 1

Views: 886

Answers (1)

Sajib Khan
Sajib Khan

Reputation: 24194

Execute the code when DOM is ready:

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     ...
})

Upvotes: 2

Related Questions