Any guides for converting Vue scripts to Quasar?

omgwalt

I understand that Quasar is based and written on top of Vue and that you can use Vue commands in Quasar. However, the way they’re organized in their respective script sections is a bit different, and I get confused at times trying to translate Vue into Quasar.

Does anyone know of any resources out there in the wild that would help me to better understand the way the two relate to each other in their overall respective structures?

s.molinari

Read up on Quasar’s boot file system here: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Introduction

There is also an “app flow” discussed, which might shine some light on your confusion.

Basically, Quasar abstracts away a lot of Vue basics, in order to keep things in line for its multi-platform building capability.

If you have further questions, please let me know.

Scott

omgwalt

Thanks for the boot files reference.
I’m currently trying to convert vue files to quasar that do autocomplete.
Among other things, their scripts include Vue props, like this:

<script>
export default {
    props: {
        suggestions: {
        type: Array,
        required: true,
        },
        selection: {
        type: String,
        required: true,
        twoWay: true
        }
    },
    data () {
        return {
   ... etc.

The problem is that approach creates errors: “vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: ‘suggestions’” and “vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: ‘selection’”

That’s an example of the kind of thing I’m talking about.

s.molinari

You should be able to use any Vue file like usual. How are you using the component? Are you offering the props that are required?

Scott

omgwalt

Hi Scott,

Thanks for your offer to help. I abandoned the track I was on because I realized that they were including Pug in the code, and that just layered on too much confusion for me to handle.

So I’ve shifted my attention to vue-bootstrap-typeahead instead at https://alexurquhart.github.io/vue-bootstrap-typeahead/#/examples/basic-example

Even here, I’m confused.

I’ve installed vue-bootstrap-typeahead and bootstrap.

Using their most basic example combined with registration, I pieced together this into a single Quasar page :

<template>
    <div id="wrapper">
        <div id="app">
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'
import 'bootstrap/scss/bootstrap.scss'

const template = `
<div>
  <vue-bootstrap-typeahead
    v-model="query"
    :data="countries"
    placeholder="Enter a country"
  />
  <p class="lead">
    Selected Country: <strong>{{query}}</strong>
  </p>
</div>
`

new Vue({
  template,
  components: {
    VueBootstrapTypeahead
  },
  data() {
    return {
      query: '',
      countries: [
        'Canada',
        'United States',
        'Mexico'
      ]
    }
  }
}).$mount('#app')
</script>

This generates errors:
[Vue warn]: Cannot find element: #app
vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
vue-router.esm.js?8c4f:16 [vue-router] Failed to resolve async component default: TypeError: Cannot set property ‘render’ of undefined
vue-router.esm.js?8c4f:16 [vue-router] uncaught error during route navigation:
vue-router.esm.js?8c4f:2117 TypeError: Cannot set property ‘render’ of undefined

I don’t even know if I’m assembling it correctly. I’ve never seen adding a template included in a const before, for example.

I would really appreciate it if you could help me to understand this.

Walt

omgwalt

Oh wait! Never mind … I got it to work!

<template>
    <div id="wrapper">
        <p class="lead">
            Selected Country: <strong>{{query}}</strong>
        </p>
        <vue-bootstrap-typeahead
            v-model="query"
            :data="countries"
            :minMatchingChars="minMatchingChars"
            placeholder="Enter a country">
        </vue-bootstrap-typeahead>
    </div>
</template>

<script>
import Vue from 'vue'
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'

export default {
  components: {
    VueBootstrapTypeahead
  },
  data() {
    return {
      query: '',
      minMatchingChars: 1,
      countries: [
        'Afghanistan',
        'Albania',
        'Algeria',
        'Andorra',
        'Angola',
        'Antigua and Barbuda',
        'Argentina',
        'Armenia',
        'Australia',
        'Austria',
        'Azerbaijan',
        'Bahamas',
        'Bahrain',
        'Bangladesh',
        'Barbados',
        'Belarus',
        'Belgium',
        'Belize',
        'Benin',
        'Bhutan',
        'Bolivia',
        'Bosnia and Herzegovina',
        'Botswana',
        'Brazil',
        'Brunei',
        'Bulgaria',
        'Burkina Faso',
        'Burundi',
        'Côte d\'Ivoire',
        'Cabo Verde',
        'Cambodia',
        'Cameroon',
        'Canada',
        'Central African Republic',
        'Chad',
        'Chile',
        'China',
        'Colombia',
        'Comoros',
        'Congo (Congo-Brazzaville)',
        'Costa Rica',
        'Croatia',
        'Cuba',
        'Cyprus',
        'Czechia (Czech Republic)',
        'Democratic Republic of the Congo',
        'Denmark',
        'Djibouti',
        'Dominica',
        'Dominican Republic',
        'Ecuador',
        'Egypt',
        'El Salvador',
        'Equatorial Guinea',
        'Eritrea',
        'Estonia',
        'Eswatini (fmr. "Swaziland")',
        'Ethiopia',
        'Fiji',
        'Finland',
        'France',
        'Gabon',
        'Gambia',
        'Georgia',
        'Germany',
        'Ghana',
        'Greece',
        'Grenada',
        'Guatemala',
        'Guinea',
        'Guinea-Bissau',
        'Guyana',
        'Haiti',
        'Holy See',
        'Honduras',
        'Hungary',
        'Iceland',
        'India',
        'Indonesia',
        'Iran',
        'Iraq',
        'Ireland',
        'Israel',
        'Italy',
        'Jamaica',
        'Japan',
        'Jordan',
        'Kazakhstan',
        'Kenya',
        'Kiribati',
        'Kuwait',
        'Kyrgyzstan',
        'Laos',
        'Latvia',
        'Lebanon',
        'Lesotho',
        'Liberia',
        'Libya',
        'Liechtenstein',
        'Lithuania',
        'Luxembourg',
        'Madagascar',
        'Malawi',
        'Malaysia',
        'Maldives',
        'Mali',
        'Malta',
        'Marshall Islands',
        'Mauritania',
        'Mauritius',
        'Mexico',
        'Micronesia',
        'Moldova',
        'Monaco',
        'Mongolia',
        'Montenegro',
        'Morocco',
        'Mozambique',
        'Myanmar (formerly Burma)',
        'Namibia',
        'Nauru',
        'Nepal',
        'Netherlands',
        'New Zealand',
        'Nicaragua',
        'Niger',
        'Nigeria',
        'North Korea',
        'North Macedonia',
        'Norway',
        'Oman',
        'Pakistan',
        'Palau',
        'Palestine State',
        'Panama',
        'Papua New Guinea',
        'Paraguay',
        'Peru',
        'Philippines',
        'Poland',
        'Portugal',
        'Qatar',
        'Romania',
        'Russia',
        'Rwanda',
        'Saint Kitts and Nevis',
        'Saint Lucia',
        'Saint Vincent and the Grenadines',
        'Samoa',
        'San Marino',
        'Sao Tome and Principe',
        'Saudi Arabia',
        'Senegal',
        'Serbia',
        'Seychelles',
        'Sierra Leone',
        'Singapore',
        'Slovakia',
        'Slovenia',
        'Solomon Islands',
        'Somalia',
        'South Africa',
        'South Korea',
        'South Sudan',
        'Spain',
        'Sri Lanka',
        'Sudan',
        'Suriname',
        'Sweden',
        'Switzerland',
        'Syria',
        'Tajikistan',
        'Tanzania',
        'Thailand',
        'Timor-Leste',
        'Togo',
        'Tonga',
        'Trinidad and Tobago',
        'Tunisia',
        'Turkey',
        'Turkmenistan',
        'Tuvalu',
        'Uganda',
        'Ukraine',
        'United Arab Emirates',
        'United Kingdom',
        'United States of America',
        'Uruguay',
        'Uzbekistan',
        'Vanuatu',
        'Venezuela',
        'Vietnam',
        'Yemen',
        'Zambia',
        'Zimbabwe'
        ]
    }
  }
}
</script>

omgwalt

The only problem I have now is that the list of countries append side-to-side rather than creating a new line each time. And if I put in this:
import ‘bootstrap/scss/bootstrap.scss’
in order to have the countries show up one under the other, it overrides my Quasar layout look-and-feel.

s.molinari

Why don’t you just use Quasar’s QSelect? It can do typeahead or rather autocomplete?

https://quasar.dev/vue-components/select#Example--Text-autocomplete

Scott

s.molinari

https://codepen.io/smolinari/pen/eYNQZRP?editors=1010

Scott

omgwalt

Okay, now I feel like a complete fool. I didn’t know that was there. Thanks!

omgwalt

This post is deleted!

No More Posting New Topics!

Any guides for converting Vue scripts to Quasar?