Quasar Framework

aXiDz

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:

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

aXiDz

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:

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:

I’m missing something?

aXiDz

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:

when string in v-html:

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?

aXiDz

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

aXiDz

@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

When i check at metatags.io - No description
https://smallseotools.com/meta-tags-analyzer/ - No description
https://www.heymeta.com/ - No description

aXiDz

@diadal Sadly…Same.

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

aXiDz

@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'
      ]
}

aXiDz

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

aXiDz

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 ?

aXiDz

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…

aXiDz

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

aXiDz

@aXiDz

Best posts made by aXiDz

Latest posts made by aXiDz