Fixed the phenomenon that vuetify built in Rails is not loaded when page transition is done

Introduction

I've finally started embedding Vuetify in Rails, but the vuetify button disappears when I make a page transition. A button is displayed when the page is refreshed. I was hit by such a problem. What is the cause? After worrying about a week, I finally found out. It was a turbolink problem. I will write it little by little.

Except hello_vue.js

App/javascript/packs/hello_vue.js was created when vue was introduced. In the previous article, I edited this one to make it better, but there was still more here.

app/javascript/packs/hello_vue.js

// If the project is using turbolinks, install 'vue-turbolinks':
//
// yarn add vue-turbolinks
//
// Then uncomment the code block below:

That's why

$ yarn add vue-turbolinks

After executing, I changed hello_vue.js as follows.

app/javascript/packs/hello_vue.js

import TurbolinksAdapter from 'vue-turbolinks' //Added because I used turbolink
import Vue from 'vue'
import Vuetify from "vuetify"; //Added for vuetify introduction
import "vuetify/dist/vuetify.min.css"; //Added for vuetify introduction
import App from '../app.vue'

Vue.use(Vuetify); //Added for vuetify introduction
const vuetify = new Vuetify(); //Added for vuetify introduction

Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
    const app = new Vue({
    vuetify, //Added for vuetify introduction
      el: '#hello',
      data: {
              message: "Can you say hello?"
            },
      components: { App }
    })
  })

I managed to do it.

What is turbolink

The turbolink that bothered me this time, but the Rails gemfile had a good description.

Gemfile

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

It seems that the speed of page transition will improve. Let's read the read.me a little more. https://github.com/turbolinks/turbolinks

Turbolinks intercepts all clicks on <a href> links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.

That seems to be the case. turbolinks seems to block the transition when you click on the a tag link. Then, instead, it uses the History API to return an HTML response. It seems that it will be faster to do it using the History API.

But I didn't understand why it was having a negative effect on vuetify.

In such a case, the answer is quicker. Let's take a look at the vue-turbolinks that vue offers as a solution.

What is vue-turbolinks?

https://github.com/jeffreyguenther/vue-turbolinks

vue-turbolinks is a package to allow you to easily add Vue.js components to your Turbolinks & Hotwire powered apps.

It's easy to add! It seems that. (What is Hotwire? Is that okay?)

Looking at index.js, it was unexpectedly simple.

https://github.com/jeffreyguenther/vue-turbolinks/blob/master/index.js

vue-turbolinks/index.js

//Abbreviation
const Mixin = {
  beforeMount: function() {
    // If this is the root component, we want to cache the original element contents to replace later
    // We don't care about sub-components, just the root
    if (this === this.$root && this.$el) {
      handleVueDestruction(this);

      // cache original element
      this.$cachedHTML = this.$el.outerHTML;

      // register root hook to restore original element on destroy
      this.$once('hook:destroyed', function() {
        this.$el.outerHTML = this.$cachedHTML
      });
    }
  }
};
//Abbreviation

I was running these functions before vue mounted. It replaced the cached HTML content with the current HTML. That was it.

I kinda get it. torbolinks pulls links from the cache, but the original vue didn't. That's why I used vue-turbolink to put HTML in the cache.

in conclusion

vue is fun. vuetify is fun. From now on, I will continue to write about what I have to do while studying.