Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Query over using Quasar with gridsome. #8005

Closed
Hecatron opened this issue Nov 5, 2020 · 1 comment
Closed

Query over using Quasar with gridsome. #8005

Hecatron opened this issue Nov 5, 2020 · 1 comment
Labels
kind/feature 💡

Comments

@Hecatron
Copy link

Hecatron commented Nov 5, 2020

I think this question has been raised before,
but the conversation seemed to veer away from the use of gridsome
and I think there have been some changes to Quasar since then.

Anyway I've been experimenting to see if I can get the latest version of quasar working with gridsome.
Which is a static site generator similar to vuepress.
"quasar": "1.14.3"
"gridsome": "^0.7.0",

In a similar fashion to other ui toolkits such as Vuetify / Tailwind / Buefy

From what I can gather since quasar is more of a heavyweight
(designed with it's own build system for different outputs and I think with more code for client side responsivness)
This seems to lead to issues such as

Initializing plugins...
Load sources - 0s
Create GraphQL schema - 0.02s
Create pages and templates - 0.02s
Generate temporary code - 0.02s
Bootstrap finish - 0.77s
Compile assets - 6.39s
Execute GraphQL (3 queries) - 0s
Could not generate HTML for "/about/":
TypeError: Cannot read property 'screen' of undefined
    at a.data (node_modules/quasar/src/components/layout/QLayout.js:37:0)
    at a.<anonymous> (D:\Temp\13\2\test-blog\node_modules\vue\dist\vue.runtime.common.prod.js:6:8369)
    at D:\Temp\13\2\test-blog\node_modules\vue\dist\vue.runtime.common.prod.js:6:28667
    at D:\Temp\13\2\test-blog\node_modules\vue\dist\vue.runtime.common.prod.js:6:28727
    at pn (D:\Temp\13\2\test-blog\node_modules\vue\dist\vue.runtime.common.prod.js:6:28934)
    at a.e._init (D:\Temp\13\2\test-blog\node_modules\vue\dist\vue.runtime.common.prod.js:6:32700)
    at new a (D:\Temp\13\2\test-blog\node_modules\vue\dist\vue.runtime.common.prod.js:6:30340)
    at Vi (D:\Temp\13\2\test-blog\node_modules\vue-server-renderer\build.prod.js:1:66279)
    at io (D:\Temp\13\2\test-blog\node_modules\vue-server-renderer\build.prod.js:1:70509)
    at ro (D:\Temp\13\2\test-blog\node_modules\vue-server-renderer\build.prod.js:1:70182)
error Command failed with exit code 1.

when building the site to files, although in develop mode I do get a visible output
I'm wondering if there's some additional option I'm missing for SSR
since I'm operating outside of the Quasar build system via UMD

src/main.js

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'

// Quasar frontend
import Quasar from 'quasar'
import { Dark } from 'quasar'
import 'quasar/dist/quasar.min.css'
import iconSet from 'quasar/icon-set/mdi-v5'


export default function (Vue, { router, head, isClient }) {

  // Add Quasar
  Vue.use(Quasar, {
    iconSet: iconSet
  })

  // Enable dark mode
  Dark.set(true)

  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

src/index.html

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
  </head>
  <body ${bodyAttrs}>

  <div id="q-app">
    ${app}
  </div>
    ${scripts}
  </body>
</html>

src/App.vue

<template>

  <q-layout view="hHh LpR fFf">
    <q-btn color="primary" label="Primary" />
    <q-icon name="mdi-cog" class="text-red" style="font-size: 2rem;" />

    <router-view />
  </q-layout>
</template>

<static-query>
query {
  metadata {
    siteName
    siteDescription
  }
}
</static-query>

<script>
export default {
  metaInfo() {
    return {
      title: this.$static.metadata.siteName,
      meta: [
        {
          key: 'description',
          name: 'description',
          content: this.$static.metadata.siteDescription
        }
      ]
    }
  }
}
</script>
@rstoenescu
Copy link
Member

Hi,

A ping to the gridsome team requesting Quasar integration would be nice. We already support too many external tools. From our perspective, Quasar already has a CLI which ensures that you get the best experience.
If you require some assistance in regards to how to properly initialize SSR for Quasar, you can take a look in a Quasar CLI generated project in ".quasar" folder after you've "quasar build -m ssr".
Sorry but I'm going to close this ticket.

@thinkido thinkido mentioned this issue Jul 1, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
kind/feature 💡
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rstoenescu @Hecatron