As simple as: <template> <div id=”app”> <img src=”./assets/logo.png”> </div> </template> <script> export default { } </script> <style lang=”css”> </style> Taken from the project generated by vue cli. If you want to use your image as a module, do not forget to bind data to your Vuejs component: <template> <div id=”app”> <img :src=”image”/> </div> </template> <script> … Read more
In addition to what awd mentioned about getting the person responsible for the server to reconfigure (an impractical solution for local development) I use a change-origin chrome plugin like this: Moesif Orign & CORS Changer You can make your local dev server (ex: localhost:8080) to appear to be coming from 172.16.1.157:8002 or any other domain.
The way to make Vue play nicely with other DOM-manipulating toolkits is to completely segregate them: if you are going to use jQuery to manipulate a DOM widget, you do not also use Vue on it (and vice-versa). A wrapper component acts as a bridge, where Vue can interact with the component and the component … Read more
Both of those examples use an arrow function () => { }, which binds this to a context different from the Vue instance. As per the documentation: Don’t use arrow functions on an instance property or callback (e.g. vm.$watch(‘a’, newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be … Read more
You can even make it shorter and use the root Vue instance as the global Event Hub: Component 1: this.$root.$emit(‘eventing’, data); Component 2: mounted() { this.$root.$on(‘eventing’, data => { console.log(data); }); }
Partial answer: with Chrome DevTools, you can localize the issue and see exactly what element caused the issue. Do the following (I did that with Nuxt 5.6.0 and Chrome 64.0.3282.186) Show DevTools in Chrome (F12) Load the page that causes “the client-side rendered virtual DOM tree…” warning. Scroll to the warning in DevTools console. Click … Read more
This has to do with the fact that mutating a prop locally is considered an anti-pattern in Vue 2 What you should do now, in case you want to mutate a prop locally, is to declare a field in your data that uses the props value as its initial value and then mutate the copy: … Read more
If your Nuxt version is 2.13 or above, you don’t need to use @nuxtjs/dotenv or anything alike because it is already backed into the framework. To use some variables, you need to have an .env file at the root of your project. This one should be ignored by git. You can then input some keys … Read more
Use JavaScript code inside v-bind (or shortcut “:”): :href=”‘#purchase-‘ + item.id” and :id=”‘purchase-‘ + item.id” Or if using ES6 or later: :id=”`purchase-${item.id}`”
A simple and effective way to solve this, it’s by adding your external script into the vue mounted() of your component. I will illustrate you with the Google Recaptcha script: <template> …. your HTML </template> <script> export default { data: () => ({ ……data of your component }), mounted() { let recaptchaScript = document.createElement(‘script’) recaptchaScript.setAttribute(‘src’, … Read more