CODEWITHSUNDEEP
javascriptvue.jsquasarhotwire-railsturbo
Chiara Ani
Chiara Ani

Reputation: 1093

How to use Quasar Dialog with Hotwire Turbo?

I am trying to use Vue Quasar Plugin UI in a Rails application working with Hotwire Turbo. Quasar Drawer works very well, but not Quasar Dialog after I click on a link, I cannot open it.

// FILE: /entrypoints/application.js
import * as Turbo from '@hotwired/turbo'
Turbo.start()
import '../main.js'

// FILE: main.js

import { createApp } from 'vue/dist/vue.esm-bundler'
import { Quasar } from 'quasar'
import MyDialog from '/components/MyDialog.vue'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

import '/stylesheets/app.scss'

let app
document.addEventListener('turbo:load', () => {
  app = createApp({
    components: { MyDialog },
    setup: () => ({})
  })
  app.use(Quasar, {
    plugins: {} // import Quasar plugins and add here
  })
  app.mount("[data-behavior='vue']")
})

// this event listener is executed as soon as
// the new body was fetched successfully but
// before replacing the `document.body`
document.addEventListener('turbo:before-render', () => {
  if (app) app.unmount()
})

<script setup>
// FILE: /components/MyDialog.vue
import { ref } from 'vue'
const alert = ref(false)
</script>
<template>
 <q-btn label="Alert" color="primary" @click="alert = true" />
    <q-dialog v-model="alert">
      <q-card>
        <q-card-section>
          <div class="text-h6">Alert</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="OK" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
</template>

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Video Games Website" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">
    
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
  </head>
  <body>
    <div data-behavior='vue'>
      <my-dialog></my-dialog>
      <%= yield %>
    </div>
  </body>
</html>

Upvotes: 0

Views: 13

Answers (0)

Related Questions