vuejs3

Using Font Awesome in Vue 3

by

These steps got it working for me: Install latest-3 (3.0.1) of vue-fontawesome, which is compatible with Vue 3, and the icon dependencies: npm i –save @fortawesome/vue-fontawesome@latest-3 npm i –save @fortawesome/fontawesome-svg-core npm i –save @fortawesome/free-solid-svg-icons In main.js, select the icons from @fortawesome/free-solid-svg-icons to load: import { library } from “@fortawesome/fontawesome-svg-core”; import { faPhone } from “@fortawesome/free-solid-svg-icons”; … Read more

How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project

by

Try this in your webpack.mix.js mix.js(‘resources/assets/js/app.js’, ‘public/js’).vue({ options: { compilerOptions: { isCustomElement: (tag) => [‘md-linedivider’].includes(tag), }, }, }); UPDATE 4.8.22 – for Vite projects: vite.config.js import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => [‘md-linedivider’].includes(tag), } } }) ] })

Vue.js 3 – replace/update reactive object without losing reactivity

by

Though Boussadjra Brahim’s solution works its not the exact answer to the question. In the sense that reactive data can not be reassigned with = but there is a way to reassign the reactive data. It is Object.assign. Therefore this should work setup(){ const formData = reactive({}) onMounted(() => { fetchData().then((data) => { if (data) … Read more

Vue 3 Vite – dynamic image src

by

Update 2022: Vite 3.0.9 + Vue 3.2.38 Solutions for dynamic src binding: 1. With static URL <script setup> import imageUrl from ‘@/assets/images/logo.svg’ // => or relative path </script> <template> <img :src=”imageUrl” alt=”img” /> </template> 2. With dynamic URL & relative path <script setup> const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href </script> <template> <img :src=”imageUrl” alt=”img” /> … Read more

How to use Vue.prototype or global variable in Vue 3?

by

You could use provide/inject or define a global config property, which replaces Vue.prototype in Vue 3: 1. provide/inject (for Composition or Options API) Provide import axios from ‘axios’; const app = Vue.createApp(App); app.provide(‘$axios’, axios); // Providing to all components during app creation Inject Composition API: const { inject } = Vue; … setup() { const … Read more