vue-component

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

What is the difference between v-model and .sync when used on a custom component

by

For Vue.js 2 both pretty much do the same thing – enable two-way binding, although .sync is more versatile. It was added after v-model was added for components. .sync allows to use v-model logic for more than one prop. Let’s compare: .sync <comp :value.sync=”username” :age.sync=”userAge” /> expands to: <comp :value=”username” :age=”userAge” @update:value=”val => username = … Read more

Copy text to clipboard: Cannot read properties of undefined reading ‘writeText’

by

The use of navigator.clipboard requires a secure origin. So if your dev environment is being served over HTTP, then the clipboard method won’t be available. According to MDN Clipboard docs This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. Maybe you could check if this method is available with … Read more

Using v-model with a prop on VUE.JS

by

Answer is from https://github.com/vuejs/vue/issues/7434 Props are read-only, but you are trying to change its value with v-model. In this case, if you change the input value, the prop is not modified and the value is restored on the next update. Use a data property or a computed setter instead: computed: { propModel: { get () … Read more

Check if a component has an event listener attached to it

by

When there are listeners attached to a component they are available in the $listeners property of the component. You can use that property to determine if a specific listener is available. For example, here is a computed property that checks for the existence of a cancel listener. computed:{ hasCancelListener(){ return this.$listeners && this.$listeners.cancel } } … Read more

$store properties are not reactive when using computed property (Vuex)

by

Your code should work if you setup everything correctly: http://codepen.io/CodinCat/pen/RKZeZe?editors=1010 A very common mistake is that you didn’t give your state initial data. You should declare the state shape explicitly, so instead of state: {} // or state: { nav: {} } do this: state: { nav: { type: ‘…’ }, … } or the … Read more