vue-component

Can we make vue.js application without .vue extension component and webpack?

by

As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files. The code below is not from me and all credit goes to this jsFiddle creator: Create an index.html file: <script src=”https://npmcdn.com/vue/dist/vue.js”></script> <script src=”https://npmcdn.com/vue-router/dist/vue-router.js”></script> <script src=”/js/Home.js”></script> <script src=”/js/Foo.js”></script> <script src=”/js/router.js”></script> <script src=”/js/index.js”></script> <div id=”app”> <router-link to=”https://stackoverflow.com/”>/home</router-link> <router-link to=”/foo”>/foo</router-link> <router-view></router-view> … 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:name=”val => userName = … Read more

Vue.js: How to specify props in single file component?

by

After a long time of experiment, I found out a practical solution: The project file structure: src/ assets/ components/ Home.vue App.vue main.js package.json config.js index.html Now, we want to access the root component — App‘s vm fields inside the sub-component Home.vue, with vue-route on. main.js: import Vue from ‘vue’ import VueRouter from ‘vue-router’ import App … 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 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

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