UPD.
After hours of experiments and searches in Internet, FINALLY, I’ve made it working.
Unfortunately, the documentation doesn’t provide any how-to about how to plug it in situations like this. Hope Quasar Team will do it!

The working main.js file is here:

import Vue from 'vue'
import App from './components/App.vue'
import Quasar from 'quasar';

import 'quasar/dist/quasar.styl'
import iconSet from 'quasar/icon-set/ionicons-v4.js'
import lang from 'quasar/lang/ru.js'
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
import '@quasar/extras/material-icons-round/material-icons-round.css'
import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'
import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
import '@quasar/extras/ionicons-v4/ionicons-v4.css'
import '@quasar/extras/mdi-v4/mdi-v4.css'
import '@quasar/extras/eva-icons/eva-icons.css'

Vue.use(Quasar)
new Vue({
    el: '#q-app',
    render: h => h(App),
})

Hope it’ll help somebody. Just exclude things you don’t need and change the language according to your project.
Thanks for no answers )))

Good day to everyone!

I’m doing first steps with Quasar, and for this time I have another good question.
I’m using Symfony, Webpack encore, so I want to use it in this way (as vue-cli app)
I used to try vue create testapp / vue add quasar (according to documentation), used to try yarn add quasar (according to some guides and issues from google), and I ALWAYS get some stupid errors
Are there anybody, who knows, how to use Quasar with webpack encore?

The most lucky strike was creating a vue app and adding Quasar. But, during the build I’m getting an error:

webpack is watching the files…

 ERROR  Failed to compile with 1 errors                                                                                                                                                          11:09:45 PM

 error  in ./testapp/src/styles/quasar.sass

SassError: File to import not found or unreadable: ~quasar-variables-styl.
        on line 15 of testapp/src/styles/quasar.variables.sass
        from line 1 of testapp/src/styles/quasar.sass
>> @import '~quasar-variables-styl';

   ^


 @ ./testapp/src/quasar.js 2:0-30
 @ ./testapp/src/main.js

What am I doing wrong?

@ouaR Thank you! Missed it out reading the article, and Google didn’t help!
Resolved, and works fine!

Hi everyone!
I’m doing first steps in Quasar, using it just for rendering my website. And this time I’ve got an issue using q-select.
I’m making the updating form, like there are some information already posted to DB, and I have to fill it up into the form. There are no problems doing this for some simple field types, like text input or date, etc. BUT there is a huge problem doing this for q-select.

<q-select v-model="app" label="Appointment" :options="appointment" :dense="true">
    </q-select>

<script>
...
app: 'Option1',
appointment: [
    {
        label: 'Option1',
        value: '1',
    },
    {
        label: 'Option2',
        value: '2',
    },
...
</script>

It grabs options from ‘appointment’ array, so there are no problems, all of the options (labels and values) are present and works pretty fine. But how to set up the default, or selected value (the value from db record)? If I set it up in v-model, then it goes like a label. If I put a value in v-model, it shows just ID, so it’s wrong.
Are there any options to set up the default ‘value’ AND ‘label’?

Eplain: On page load it shows ‘Option1’ selected, and it shows ‘Option1’ in value in the form. But if you select anything, eg. ‘Option2’, it will put ‘2’ in value (right way). How to put value in ‘value’ and show label?

Thanks in advance!

I resolved the problem in this way: added variables right in the init.

    <script>
        new Vue({
            el: '#q-app',
            data: function () {
                return {
                    text: '',
                    username: '',
                    email: '',
                    plainPassword: '',
        }
},
</script>

Hope it would be helpful for somebody with the same issue ))))

ok, here it is

This is the base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
        <link href="https://themify.me/wp-content/themes/themify-v32/themify-icons/themify-icons.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.min.css" rel="stylesheet" type="text/css">
        <script type="module" src="https://apple.wfonline.ru/assets/js/exports.js"></script>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}

    </head>
    <body>
    <div id="q-app">
    <template>
        <div class="q-pa-md">
            <q-layout view="lHh Lpr lFf"  class="shadow-2 rounded-borders">
                <q-header reveal elevated>
                    <q-toolbar class="bg-grey-9 text-white shadow-2 rounded-borders">
                        <q-btn flat label="Home"></q-btn>
                        <q-btn flat label="Topic list"></q-btn>
                        <q-btn flat label="User list"></q-btn>

                        <q-space></q-space>
                        <q-btn type="a" href="{{ url('app_register') }}" flat label="Sign in"></q-btn>
                        <q-btn type="a" href="{{ url('app_login') }}" flat label="Log in"></q-btn>
                    </q-toolbar>
                </q-header>
                {% block body %}{% endblock %}
            </q-layout>
        </div>
    </template>
    </div>
        {% block javascripts %}{% endblock %}
        <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.ie.polyfills.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.umd.modern.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/lang/ru.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/icon-set/themify.umd.min.js"></script>

        <script>
            Quasar.lang.set(Quasar.lang.ru)
            Quasar.iconSet.set(Quasar.iconSet.themify)
            new Vue({
                el: '#q-app',
                data: function () {
                    return {}
                },
            })
        </script>
    </body>
</html>

here’s the body:

{% extends 'site/base.html.twig' %}

{% block title %}Sign in{% endblock %}

{% block body %}


    {% for flashError in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
    {% endfor %}

    <div class="row">
        <div class="col-md-6 offset-md-3"><h1>Sign in</h1></div>
    </div>
<div class="row">
    <div class="col-md-2 offset-md-3">
        <form method="post" name="registration_form">
                <template>
                    <q-form>
                    <q-input v-model="username" label="Username" name="username"></q-input>
                    <q-input label="e-mail" name="email"></q-input>
                    <q-input label="Password" name="plainPassword"></q-input>
                    <q-input label="Password one more time" name="password2"></q-input>
                    <br>
                    <q-btn type="submit" label="Submit" outline push color="grey-9" />
                    </q-form>
                </template>
        </form>
    </div>
</div>
{% endblock %}

and the exports.js:

export default {
    data () {
        return {
            text: '',
            username: '',
        }
    }
};

Any ideas?

Hi there!
I’m newbie in js and especialy in vue. And I’ve got a problem using Quasar in my frontend app.
I’ve used Quasar to render the form in my app in this way:

        <form method="post" name="registration_form">
        <template>
            <q-form>
            <q-input v-model="username" label="Username" name="username"></q-input>
            <q-input label="e-mail" name="email"></q-input>
            <q-input label="Password" name="plainPassword"></q-input>
            <q-input label="Password one more time" name="password2"></q-input>
            <br>
            <q-btn type="submit" label="Submit" outline push color="grey-9" />
            </q-form>
        </template>
        </form>

and got an error ReferenceError: “username is not defined” and blank page.

If I remove v-model=“username” from the q-input, the page renders correctly, no errors in browser console. But after filling the field and TAB to next one, text disappears.

I’ve tried LOTS of searches in google, but none guides helped. What am I doing wrong?

Thanks for help in advance