Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. aXiDz
    A
    • Profile
    • Following 0
    • Followers 0
    • Topics 5
    • Posts 12
    • Best 1
    • Groups 0

    aXiDz

    @aXiDz

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

    aXiDz Follow

    Best posts made by aXiDz

    • [Solved]core-js issue

      Hey Guys and Gals,
      Just updated quasar:

      @quasar/extras: 1.4.1 → 1.5.0
       quasar: 1.7.3 → 1.8.3
       @quasar/app: 1.5.1 → 1.5.2
      

      accidentally pressed ctrl+c and didn’t terminate the process, update stopped… Hit “Y”, redid update with errors:

      @quasar/app: Missing! → 1.5.2
      

      Everything seemed fine until this pops ups:

      ebca9366-eb0b-4ffc-9c8c-9787dacd25e0-image.png

      Tried updating core-js, quasar, npm, also following suggestion to install all the modules - nothing :(.
      Anyone came across something similar?

      posted in Help
      A
      aXiDz

    Latest posts made by aXiDz

    • q-item-section dynamic font class doesn't work.

      Hello,
      I’m trying to create text input and font selection based on that input.

       <q-card flat class="text-grey-4 my-card">
            <q-card-section>
              <q-input v-model="text" />
            </q-card-section>
            <q-card-section>
              <div class="q-gutter-md">
                <q-select
                  filled
                  v-model="selectedFont"
                  :options="fonts"
                  stack-label
                  label="Text Placeholder Content"
                >
                  <template v-slot:option="scope">
                    <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                      <q-item-section>
                        <q-item-label v-html="scope.opt" />
                      </q-item-section>
                      <q-item-section append :class="fonts[scope.index]"> {{text}}</q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>
            </q-card-section>
          </q-card>
      

      Small names array:

      fonts: ['Arial', 'Helvetica-Bold', 'Boombox'],
      

      Additionally importing more fonts via CSS:

      @font-face 
        font-family: Arial
        src: url(/fonts/arial.tff)
      
      // declare a class which applies it
      .Arial
        font-family: 'Arial'
      
      @font-face
        font-family: Helvetica-Bold
        src: url(/fonts/Helvetica-Bold.ttf)
      
      // declare a class which applies it
      .Helvetica-Bold
        font-family: 'Helvetica-Bold'
      
      @font-face 
        font-family: Boombox
        src: url(/fonts/BoomBox.tff)
      
      // declare a class which applies it
      .BoomBox
        font-family: 'BoomBox'
      
      

      Gives me the following output:
      bda107f1-588d-4dbf-b5f3-6cb3d961b396-image.png
      Looking good right? except it’s not the font…
      When changing to:

      <q-item-section append class="BoomBox"> {{text}}</q-item-section>
      

      It shows the real font:
      2283daf4-3667-4c32-8d00-ad7f8472aaf8-image.png

      I’m missing something?

      posted in Framework
      A
      aXiDz
    • v-html doesn't break html to new lines as expected for web mobile resolution

      Hello Guys and Gals,
      I’m trying to use q-editor to create articles with html attributes, saving it as a string, and afterwards i’m showing it with <div v-html=“myString” />
      When showing string with mustaches, raw, it’s being broken properly in flex:
      1f2ae3e3-985b-4ff1-b1b5-1df6b9801f8c-image.png
      when string in v-html:
      34e90a83-d824-4c2e-8eb5-1320faba58b8-image.png
      html works properly but it won’t start new lines + it offsets whole layout. Though to break it by characters on input, but won’t be that effective. Maybe add to some kind of container, there has to be a way to limit or control lines for v-html directive, it’s not very mobile friendly currently.

      Any idea how to tackle this?

      posted in Framework
      A
      aXiDz
    • RE: Set Meta Description from within Vue page

      @Arkshine I’m not using SSR mode you are right…Maybe, that’s one way to solve it…

      posted in Framework
      A
      aXiDz
    • RE: Set Meta Description from within Vue page

      @diadal Thanks for the suggestion - it will save a bit time building 😃
      @Hawkeye64 tried the code, productName, productDescription and even all ctx settings are undefined.
      I have a feeling you are talking about something to come… quasar.conf.js doesn’t have those defined.

      wait a second…quasar max running is v1.9.6…

      "devDependencies": {
         "@quasar/app": "^1.9.6"
      }
      

      tried:

      quasar upgrade
      

      Returns that everything is updated.

      Update:
      I didn’t use @Hawkeye64 code for v2 index.template.html, removed only description from my old index.template.html.
      so… i used moz extension it shows @Hawkeye64 code
      e6e90a03-a000-44af-8def-fc4fecc21758-image.png
      When i check at metatags.io - No description
      https://smallseotools.com/meta-tags-analyzer/ - No description
      https://www.heymeta.com/ - No description

      posted in Framework
      A
      aXiDz
    • RE: Set Meta Description from within Vue page

      @diadal Sadly…Same.

      I have a feeling something is interfering…how come if it’s set - it doesn’t show on metatags.io?

      posted in Framework
      A
      aXiDz
    • RE: Set Meta Description from within Vue page

      @diadal Thank you for the interest 🙂
      Tried to remove description + title and so on… but when i do remove it at index.template.html It’s gone on all pages.

      <!DOCTYPE html>
      <html>
      <head>
        <title><%= htmlWebpackPlugin.options.productName %></title>
        <meta charset="utf-8">
        <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
        <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
        <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
        <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
        <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
      </head>
      <body>
        <!-- DO NOT touch the following DIV -->
        <div id="q-app"></div>
      </body>
      </html>
      

      @Hawkeye64 Thanks for reply, my quasar.conf.js plugins

      framework: {
            // Quasar plugins
            plugins: [
              // 'LocalStorage',
              'Notify',
              'Dialog',
              'Loading',
              'Cookies',
              'Meta'
            ]
      }
      
      posted in Framework
      A
      aXiDz
    • RE: Set Meta Description from within Vue page

      @Hawkeye64 Thank you a lot for the solution, i like it more than the one in the other post, Tried just now, sadly, no success, everything is set as before and it’s empty on metatags.io, somewhy only when description and title defined on index.template.html, it works…
      It’s strange, quasar.dev has same setup and it shows flawlessly on metatags.io.

      posted in Framework
      A
      aXiDz
    • Set Meta Description from within Vue page

      Hello,
      I’m trying to change description so for each page it would be different, which is set by meta plugin([https://forum.quasar-framework.org/topic/6265/quasar-seo-tips/3](SEO TIPS)), using the following within App.vue:

      import meta from './utils/meta.js'
      export default {
        name: "App",
           data () {
            return {
          metaTags: {
                description: 'My description...',
                title: 'Get Started | My-site',
                url: 'https://my-wan-ip',
                image: 'https://my-wan-ip/image-1.png'
              }
            }
          },
          meta //this is the method that the plugin is using
      };
      

      index: Setting like in app and calling meta again.
      Removed description from index.template.html and title so they won’t appear in header
      Can see Description set within HTML:

      <meta name="og:url" content="https://mywan-ip" data-qmeta="ogUrl">
      <meta name="twitter:url" content="https://mywan-ip" data-qmeta="twitterUrl">
      <meta rel="canonical" href="https://mywan-ip" data-qmeta="canonical">
      <meta name="og:image" content="https://mywan-ip/image-1.png" data-qmeta="ogImage">
      <meta name="twitter:image" content="https://mywan-ip/image-1.png" data-qmeta="twitterImage">
      <meta name="og:title" content="Index page | My Site" data-qmeta="ogTitle">
      <meta name="twitter:title" content="Index page | My Site" data-qmeta="twitterTitle">
      <meta name="description" content="description..." data-qmeta="description">
      <meta name="og:description" content="description..." data-qmeta="ogDescription">
      <meta name="twitter:description" content="description..." data-qmeta="twitterDescription">
      

      When trying the url at metatags.io the description, title appear empty nor thumbnail is seen.
      Edit: I’m using pwa and tried using meta plugin tags as well, same result, I can see the pages title change but metatags.io don’t preview it
      Any ideas what am i Doing wrong ?😰

      posted in Framework
      A
      aXiDz
    • RE: [Solved]core-js issue

      After Diving in…Can see that those files really don’t exist. There are no “es6…” files inside core-js => modules folder
      tried to install core-js again…
      Quasar asks for files which do not exist… that’s strange… even original core-js package doesn’t have them…

      851fba53-ae8b-497d-b492-2e4e79ab3c2b-image.png

      posted in Help
      A
      aXiDz
    • RE: [Solved]core-js issue

      @metalsadman
      Removed package-lock.json
      Removed node_modules/
      npm install
      Getting the same 😕

      bf5c2003-75bf-48ca-85cc-daa63d225681-image.png

      posted in Help
      A
      aXiDz