However, there is no guide for vue cli plugin.

// quasar.js
import Vue from 'vue';
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/ionicons-v4/ionicons-v4.css';
import 'quasar/dist/quasar.css';
import { Quasar, Loading, QSpinner, Dialog } from 'quasar';
import * as iconSet from '@quasar/extras/ionicons-v5';
Vue.prototype.$i = iconSet;

import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/ionicons-v4/ionicons-v4.css';

Vue.use(Quasar, {
  config: {
    // Quasar Spinning 파트 참조
    loading: {
      spinner: QSpinner,
      spinnerColor: 'teal-10',
      messageColor: 'white',
      message: '<b>Loading...</b>',
    },
  },
  plugins: { Loading, Dialog },
  animations: ['backInLeft', 'backOutLeft', 'fadeIn', 'fadeOut'],
});

// test.vue
<transition
        appear
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <q-icon
          :name="$i.ionCheckmarkCircleOutline"
          color="green"
          style="width:330px;height:330px"
        ></q-icon>
      </transition>

Animation not works! How to fix in?

However, there is no guide for vue cli plugin.

// quasar.js
import Vue from 'vue';
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/ionicons-v4/ionicons-v4.css';
import 'quasar/dist/quasar.css';
import { Quasar, Loading, QSpinner, Dialog } from 'quasar';
import * as iconSet from '@quasar/extras/ionicons-v5';
Vue.prototype.$i = iconSet;

import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/ionicons-v4/ionicons-v4.css';

Vue.use(Quasar, {
  config: {
    // Quasar Spinning 파트 참조
    loading: {
      spinner: QSpinner,
      spinnerColor: 'teal-10',
      messageColor: 'white',
      message: '<b>Loading...</b>',
    },
  },
  plugins: { Loading, Dialog },
  animations: ['backInLeft', 'backOutLeft', 'fadeIn', 'fadeOut'],
});

// test.vue
<transition
        appear
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <q-icon
          :name="$i.ionCheckmarkCircleOutline"
          color="green"
          style="width:330px;height:330px"
        ></q-icon>
      </transition>

Animation not works! How to fix in?

@dobbel Thank you your advice. I think your approach looks good but the suggested way is not fundamental solution for usage of lazy-rules. It will check validation when I would type a character in input box. It means, anyway, lazy-rules=“ondemand” still not work.

I want q-form to trigger external validation function “isUsernamVlid” when I click Login button. However, every time I typed a character in q-input, validation function was triggered. How to fix it?

 <q-form @submit.prevent="submitForm">
      <q-input
        class="q-ma-md"
        outlined
        lazy-rules="ondemand"
        v-model="id"
        label="ID"
        error-message="wrong"
        :error="!isUsernameValid"
      />
      <q-btn
         class="q-ma-md"
         type="submit"
         color="light-blue"
         label="Login"
         :loading="submitting"
      >
      <template v-slot:loading>
            <q-spinner-facebook />
      </template>
 </q-btn>