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


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.


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


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

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.


# Turbolinks makes navigating your web application faster. Read more:

It seems that the speed of page transition will improve. Let's read the a little more.

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?

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.


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) {

      // 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

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.

Recommended Posts

Fixed the phenomenon that vuetify built in Rails is not loaded when page transition is done
I faced a problem that JS is not read after page transition and JS is read when loaded.
[Rails] About the error that the image is not displayed in the production environment
When the project is not displayed in eclipse
The story that .java is also built in Unity 2018
[rails devise] How to transition users who are not logged in to the login page
Processing when an ID that does not exist in the database is entered in the URL
The story when the test folder was not created in Rails
How to solve the problem when the value is not sent when the form is disabled in rails and sent
[Rails] When the layout change of devise is not reflected
How to write the view when Vue is introduced in Rails?
Data is not registered in Rails.
How to solve the problem that it is not processed normally when nesting beans in Spring Batch
Incident (rails) that is logged out when user editing of the application
"" Application.js "is not present in the asset pipeline" error in Ruby on Rails
How to constrain the action of the transition destination when not logged in
The story that the Servlet could not be loaded in the Java Web application
[Cloud9] Yay! You ’re on Rails! Is not displayed in the rails tutorial
The problem that the localhost page launched by Docker cannot be confirmed in the browser when the ESET firewall is operating
How to resolve the error'ActionView :: Template :: Error (The asset "application.css" is not present in the asset pipeline.'" When precompiling Rails assets
What to do when rails db: seed does not reflect in the database
When nginx conf is not reflected well in AWS Elastic Beanstalk + Rails environment
How to set when "The constructor Empty () is not visible" occurs in junit
Ebean.update () is not executed in the inherited model.
[Ruby On Rails] Description that allows only specific users to transition to the edit page
[Railways] Railways does not work when the RubyMine project root is other than the Rails root directory.
Introducing the settings and reference articles that are first done in Rails new development
[Ruby on rails] When executing the heroku command, bash: heroku: command not found is displayed. [Rails tutorial]
Library not loaded when trying to upgrade the version of ruby and rails s
[Android Studio] About the matter that the design view is not displayed when using TextClock