No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. mitchellmonaghan
    M
    • Profile
    • Following 1
    • Followers 0
    • Topics 4
    • Posts 17
    • Best 7
    • Groups 0

    mitchellmonaghan

    @mitchellmonaghan

    13
    Reputation
    395
    Profile views
    17
    Posts
    0
    Followers
    1
    Following
    Joined Last Online

    mitchellmonaghan Follow

    Best posts made by mitchellmonaghan

    • Quasar preFetch vs vuejs serverPrefetch

      So what’s the difference from the quasar preFetch function and the vuejs serverPrefetch added in in 2.6.0+? It seems the vue one has access to the “this” context of the component? Was this added after quasar ssr and should quasar prefetch not be used/deprecated or is there something that it provides that the vuejs one doesn’t?

      The docs don’t talk about this or why to go with one over the other. Currently it sounds like the vue one is superior as it has the additional access to the “this” context of the component. If you ever accidentally use “this” in the quasar preFetch that prop is directly saved on the server. When you refresh the page it still has the old prop, and could be dangerous to ever do that.

      posted in Help
      M
      mitchellmonaghan
    • RE: dotnet core

      I have setup a basic template for you here https://github.com/MitchellMonaghan/DotnetCoreQuasar

      This is how I have setup my projects so far. I let the vue/quasar deal with everything front end related and dotnet core manages db/api/auth etc. I don’t have any views in my dot net core application. All pages and routing is handled by vue/quasar, and api requests are made for needed data for each page.

      Hope this helps

      posted in Help
      M
      mitchellmonaghan
    • RE: proxy target does not resolve process.env.ROOT_API

      I ran into this issue as well. I did this at the top of quasar.conf.js. You then can access your env on the new variable. Sorry for necro just thought it might help someone.

      const envFile = require('./.quasar.env.json')
      const env = envFile[process.env.QENV]
      
      posted in Framework
      M
      mitchellmonaghan
    • RE: Quasar v0.15.7 & CLI 0.15.11 are out!

      Keep up the awesome work!

      posted in Announcements
      M
      mitchellmonaghan
    • IE11 support issues

      Hi all,

      Been using quasar for a while now and love this framework. Just updated some of my stuff to 0.15. However I have ran into a issue with IE11 support with my projects.

      So I created a new project with the cli (quasar init) and said yes for IE support in the cli and get the same issues with the base template as I had with my other projects. When I go to view the newly generated site IE11 only shows a white screen and and error in the console.

      The error is:

      SCRIPT1002: Syntax error
      app.js(1183,9)

      Has anyone else had issues viewing a newly generated template site with IE11? I have confirmed that the supportIE: true is in the quasar.conf.js. Running the most up to date quasar version as well 0.15.5.

      Would love any help to solve whats going on here. Everything works great in Edge!

      Thanks,
      Mitch

      posted in Help
      M
      mitchellmonaghan
    • RE: dotnet core

      Hi Axi,

      I have have a few projects that I have made with dotnet core. I didn’t use any premade template though. I created a regular quasar project with quasar init, I then created a folder called backend. I then used the dotnet cli (dotnet new web) to create a new empty dotnet project. After that is setup I created a build script that would clean/build both quasar and the dotnet project, and copy the built quasar project files to the wwwroot folder of dotnet.

      Not sure if this is the best approach, but I haven’t had any issues yet. Let me know if you have anymore questions, or want my build script.

      Thanks

      posted in Help
      M
      mitchellmonaghan
    • RE: Hydration Apollo Client

      I was able to figure this out, with the help of the vue-apollo docs. You can set a rendered function on your ssrContext that quasar provides. I was confused by what the docs meant by context. With this you can remove the entire prefetch from the component.

      Updating files incase someone else gets stuck on this like I did.

      Updated apollo boot file

      import { ApolloClient } from 'apollo-client'
      import { InMemoryCache } from 'apollo-cache-inmemory'
      import VueApollo from 'vue-apollo'
      import fetch from 'node-fetch'
      import { createHttpLink } from 'apollo-link-http'
      
      const createApolloClient = function (isServerSide) {
        const httpLink = createHttpLink({ uri: process.env.API_URL, fetch: fetch })
        const cache = new InMemoryCache()
      
        if (!isServerSide) {
          const state = window.__APOLLO_STATE__
      
          if (state) {
            cache.restore(state)
          }
        }
      
        const apolloClient = new ApolloClient({
          link: httpLink,
          cache,
          connectToDevTools: true,
          ...(isServerSide ? { ssrMode: true } : { ssrForceFetchDelay: 100 })
        })
      
        const apolloProvider = new VueApollo({
          defaultClient: apolloClient,
          errorHandler ({ graphQLErrors, networkError }) {
            if (graphQLErrors) {
              graphQLErrors.map(({ message, locations, path }) =>
                console.log(
                  `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
                )
              )
            }
            if (networkError) {
              console.log(`[Network error]: ${networkError}`)
            }
          }
        })
      
        return apolloProvider
      }
      
      export default ({ app, Vue, ssrContext }) => {
        const apolloProvider = createApolloClient(!!ssrContext)
      
        Vue.use(VueApollo)
        app.provide = ({ $apolloProvider: apolloProvider })
      
        if (ssrContext) {
          ssrContext.rendered = () => {
            ssrContext.apolloState = JSON.stringify(apolloProvider.defaultClient.extract())
          }
        }
      }
      
      

      listItems component

      <template>
        <div class="col">
          <ul>
            <li v-for="item in listItems" :key="item.id">
              <router-link :to="{ name: 'anotherPage', params: { name: item.name } }">{{ item.name }}</router-link>
            </li>
          </ul>
        </div>
      </template>
      
      <script>
      import GET_LIST_ITEMS from '@graphql/queries/listItems.gql'
      
      export default {
        apollo: {
          listItems: {
            query: GET_LIST_ITEMS,
            variables: {
              where: {}
            }
          }
        }
      }
      </script>
      
      posted in Help
      M
      mitchellmonaghan

    Latest posts made by mitchellmonaghan

    • RE: Vue router v3 compatible with quasar?

      Hi,

      I am in the same boat. I needed onBeforeRouteLeave for a “Unsaved changes” popup. I found a fix here.
      https://github.com/vuejs/composition-api/issues/49#issuecomment-701015268

      I think the vue-router version that provides these composition api functions requires Vue3. I also think support for Quasar and Vue3 is currently in development. I might be wrong I don’t know for sure, but figured I would post the fix that worked for me while looking into this issue.

      Thanks,
      Mitch

      posted in Help
      M
      mitchellmonaghan
    • RE: proxy target does not resolve process.env.ROOT_API

      I ran into this issue as well. I did this at the top of quasar.conf.js. You then can access your env on the new variable. Sorry for necro just thought it might help someone.

      const envFile = require('./.quasar.env.json')
      const env = envFile[process.env.QENV]
      
      posted in Framework
      M
      mitchellmonaghan
    • RE: q-checkbox custom icons removed?

      my solution is simple

      <q-btn v-if="userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite" />
      <q-btn v-if="!userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite_border" />
      
      posted in Help
      M
      mitchellmonaghan
    • RE: q-checkbox custom icons removed?

      I also used this for like/dislike buttons and a heart favorite button. I agree sad to see this convenience go

      posted in Help
      M
      mitchellmonaghan
    • Quasar preFetch vs vuejs serverPrefetch

      So what’s the difference from the quasar preFetch function and the vuejs serverPrefetch added in in 2.6.0+? It seems the vue one has access to the “this” context of the component? Was this added after quasar ssr and should quasar prefetch not be used/deprecated or is there something that it provides that the vuejs one doesn’t?

      The docs don’t talk about this or why to go with one over the other. Currently it sounds like the vue one is superior as it has the additional access to the “this” context of the component. If you ever accidentally use “this” in the quasar preFetch that prop is directly saved on the server. When you refresh the page it still has the old prop, and could be dangerous to ever do that.

      posted in Help
      M
      mitchellmonaghan
    • RE: Hydration Apollo Client

      I was able to figure this out, with the help of the vue-apollo docs. You can set a rendered function on your ssrContext that quasar provides. I was confused by what the docs meant by context. With this you can remove the entire prefetch from the component.

      Updating files incase someone else gets stuck on this like I did.

      Updated apollo boot file

      import { ApolloClient } from 'apollo-client'
      import { InMemoryCache } from 'apollo-cache-inmemory'
      import VueApollo from 'vue-apollo'
      import fetch from 'node-fetch'
      import { createHttpLink } from 'apollo-link-http'
      
      const createApolloClient = function (isServerSide) {
        const httpLink = createHttpLink({ uri: process.env.API_URL, fetch: fetch })
        const cache = new InMemoryCache()
      
        if (!isServerSide) {
          const state = window.__APOLLO_STATE__
      
          if (state) {
            cache.restore(state)
          }
        }
      
        const apolloClient = new ApolloClient({
          link: httpLink,
          cache,
          connectToDevTools: true,
          ...(isServerSide ? { ssrMode: true } : { ssrForceFetchDelay: 100 })
        })
      
        const apolloProvider = new VueApollo({
          defaultClient: apolloClient,
          errorHandler ({ graphQLErrors, networkError }) {
            if (graphQLErrors) {
              graphQLErrors.map(({ message, locations, path }) =>
                console.log(
                  `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
                )
              )
            }
            if (networkError) {
              console.log(`[Network error]: ${networkError}`)
            }
          }
        })
      
        return apolloProvider
      }
      
      export default ({ app, Vue, ssrContext }) => {
        const apolloProvider = createApolloClient(!!ssrContext)
      
        Vue.use(VueApollo)
        app.provide = ({ $apolloProvider: apolloProvider })
      
        if (ssrContext) {
          ssrContext.rendered = () => {
            ssrContext.apolloState = JSON.stringify(apolloProvider.defaultClient.extract())
          }
        }
      }
      
      

      listItems component

      <template>
        <div class="col">
          <ul>
            <li v-for="item in listItems" :key="item.id">
              <router-link :to="{ name: 'anotherPage', params: { name: item.name } }">{{ item.name }}</router-link>
            </li>
          </ul>
        </div>
      </template>
      
      <script>
      import GET_LIST_ITEMS from '@graphql/queries/listItems.gql'
      
      export default {
        apollo: {
          listItems: {
            query: GET_LIST_ITEMS,
            variables: {
              where: {}
            }
          }
        }
      }
      </script>
      
      posted in Help
      M
      mitchellmonaghan
    • Hydration Apollo Client

      Hi all,

      I’ve been tinkering around trying to learn ssr/apollo client better and was wondering if there is a better solution then what I have. Is there a cleaner way to hydrate the front end client without the use a vuex? I’m also using vueApollo and it says that it attempts to do prefetch automatically but I’m not sure how I would set the APOLLO_STATE.

      Dev mode… ssr + pwa
      Pkg quasar… v1.0.5
      Pkg @quasar/app… v1.0.4

      Apollo Boot File

      import { ApolloClient } from 'apollo-client'
      import { InMemoryCache } from 'apollo-cache-inmemory'
      import VueApollo from 'vue-apollo'
      import fetch from 'node-fetch'
      import { createHttpLink } from 'apollo-link-http'
      
      const createApolloClient = function (ssr = false) {
        const httpLink = createHttpLink({ uri: process.env.API_URL, fetch: fetch })
        const cache = new InMemoryCache()
      
        if (!ssr && typeof window !== 'undefined') {
          const state = window.__APOLLO_STATE__
      
          if (state) {
            cache.restore(state)
          }
        }
      
        // Create the apollo client
        const apolloClient = new ApolloClient({
          link: httpLink,
          cache,
          connectToDevTools: true,
          ...(ssr ? { ssrMode: true } : { ssrForceFetchDelay: 100 })
        })
      
        return apolloClient
      }
      
      export default ({ app, Vue, ssrContext }) => {
        const apolloClient = createApolloClient(!!ssrContext)
      
        const apolloProvider = new VueApollo({
          defaultClient: apolloClient,
          errorHandler ({ graphQLErrors, networkError }) {
            if (graphQLErrors) {
              graphQLErrors.map(({ message, locations, path }) =>
                console.log(
                  `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
                )
              )
            }
            if (networkError) {
              console.log(`[Network error]: ${networkError}`)
            }
          }
        })
      
        Vue.use(VueApollo)
        app.provide = ({ $apolloProvider: apolloProvider })
      
        if (ssrContext) {
          ssrContext.apolloState = JSON.stringify(apolloProvider.defaultClient.extract())
          ssrContext.apollo = apolloProvider
        }
      }
      
      

      The apolloClient.extract() here always returns {} but I still need to call it here because if ssrContext.apolloState is null quasar complains when it tries to inject apolloState into index.template.html

      index.template.html

      <% if (htmlWebpackPlugin.options.ctx.mode.ssr) { %>
            <script>
              window.__APOLLO_STATE__ = {{{ apolloState }}};
            </script>
          <% } %>
      

      listItems component

      <template>
        <div class="col">
          <ul>
            <li v-for="item in listItems" :key="item.id">
              <router-link :to="{ name: 'anotherPage', params: { name: item.name } }">{{ item.name }}</router-link>
            </li>
          </ul>
        </div>
      </template>
      
      <script>
      import GET_LIST_ITEMS from '@graphql/queries/listItems.gql'
      
      export default {
        async preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext }) {
          if (ssrContext) {
            await ssrContext.apollo.defaultClient.query({
              query: GET_LIST_ITEMS,
              variables: {
                where: {}
              }
            })
      
            ssrContext.apolloState = JSON.stringify(ssrContext.apollo.defaultClient.extract())
          }
        },
      
        apollo: {
          listItems: {
            query: GET_LIST_ITEMS,
            variables: {
              where: {}
            }
          }
        }
      }
      </script>
      

      Do I have to use quasar prefetch on every component? Is there a cleaner/better way? Am I missing something? This currently works, client properly hydrated, no additional graphql requests, apollo cache is loaded without the use of vuex. I want to use apolloClient for local state management and so it would be better to not have vuex in the build.

      Would love your input! Thanks!

      posted in Help
      M
      mitchellmonaghan
    • RE: Quasar v0.15.7 & CLI 0.15.11 are out!

      Keep up the awesome work!

      posted in Announcements
      M
      mitchellmonaghan
    • RE: <q-input /> with float-label has no margin or padding top

      When I saw this I just assumed it was working as designed. I added the q-mt-md class for the amount of margin I wanted.

      posted in Framework
      M
      mitchellmonaghan
    • RE: dotnet core

      Yes when I am running a dev environment I run the back end in vscode(ctrl + f5) to debug, and I run quasar separately with quasar dev. When you build for production it will all be one application as the dotnet core serves static files from the wwwroot folder. the build.js file should handle all your build needs.

      posted in Help
      M
      mitchellmonaghan