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?