News Articles vuejs2

"Failed to parse source for import analysis" error occurred

I m VUE Beginner. So I want to create simple vue single file component. I added following code snippets and run my server using yarn vite Then I got following error. Could anyone help me to resolve this issue ? App.vue <template> <h1>Hello world</h1> </template> <script> export default{ } </script> <style scoped> </style> index.html <!DOCTYPE […]

Why are my navigation circles on carousel not updating when clicked?

I am building my own carousel from scratch and everything works perfectly fine except for when you click the navigation circles. If you have the interval/infinite loop prop, the circles update to the correct active slide and the same goes for pressing the side left and right buttons. However, when I click the circles directly, […]

Nodejs limit the API access to hosted web app

I have a hosted admin panel under the domain admin.foo.com and the API hosted under the domain api.foo.com I have an open endpoint GET – api.foo.com/all-products. There is no authentication header required to access this resource. But this should be accessed only via the hosted web app. The user should not be able to copy […]

Vue 2 emit not running method, even though setup correctly

I’m trying to emit an event from a child Vue component to it’s parent, I’m trying to do this with this.$emit(‘collapsemenu’). When I’m trying to get this event from the parent with v-on:collapsemenu="collapseMenuf($event)" nothing happens at all. The method does not run, but I’m sure the child event emits the event. Am I missing something […]

Disable to load chunk files via bootstrap script

How to disable dynamic loading chunked css files after making production build in VueJs2? Problem here // mini-css-extract-plugin CSS loading var cssChunks = {"chunk-4f730675":1}; if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { var href = "css/" + ({}[chunkId]||chunkId) + "." + {"chunk-4f730675":"ba84c417"}[chunkId] + ".css"; ……….. var head = […]

Vue display an image from firebase cloud storage blob

Im building a product lookup repository, users will scan a product barcode which will then return data about the product and a picture of the product to be displayed. Right now for testing purposes I have set up a firebase storage bucket, with one image uploaded. Im have successfully been able to retrieve the image […]

Using a async plugin in Vue2

I try to fetch a json file in a custom plugin in Vue. But the prototype created in the plugin cannot be ready yet before other components attempt to use it in mounted(). So, what am I doing wrong? Couldn’t find anything remarkable in StackOverflow. app.js import Vue from "vue" const Url = require("@/plugins/Url") Vue.use(Url) […]

router-view adds unwanted attribute on html element

I have a route structure similar to this : [ { path: ‘/level1/:prop1’, props: [‘prop1’], component: () => import(‘@/component/Level1Component’), children: [ { path:’/level1/:prop1/level2/:prop2′, props: [‘prop1’, ‘prop2’] component: () => import(‘@/component/Level2Component’) } ] } ] The main page has the router-view for Level1Component. Level1Component has a router-view for Level2Component: <script> export default { name : ‘Level1Component’, […]

Vue.js : Property or method is not defined on the instance but referenced during render

I have <template> <div class="dashboard"> <Navbar /> <MainPanel :title="Dashboard" :icon="dasboard" /> </div> </template> <script> import MainPanel from ‘../../components/MainPanel’ import Navbar from ‘../../components/Navbar’ export default { name: ‘Dashboard’, components: { Navbar, MainPanel } } </script> As you can see, I’m trying to reuse my MainPanel component. MainPanel <template> <v-container fluid class="my-5"> <v-row> <v-flex col-xs-12> <v-card elevation="2" […]

How to do add to cart by scan barcode in Laravel with Vue?

I am so new with Vue Js and Laravel. So anyone can help to do add shopping cart by scan barcode that use Vue and Laravel. Thanks Source: Vue – Stack Overflow

is it possible to import enjoyhint jquery derived script in vuejs app?

I am new in vuejs. Is there any issues to import a jquery derived script in vuejs app ? I am trying to import this jquery based lib in a vuejs app, is it possible ? https://github.com/zapper59/enjoyhint https://github.com/xbsoftware/enjoyhint – original Source: Vue – Stack Overflow

vue.runtime.esm.js?TypeError: Cannot read properties of undefined

I create this component from the vuetify documentation. https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-card/prop-outlined.vue <template> <v-card class="mx-auto" max-width="344" outlined> <v-list-item three-line> <v-list-item-content> <div class="text-overline mb-4">OVERLINE</div> <v-list-item-title class="text-h5 mb-1"> {{ person.name }} </v-list-item-title> <v-list-item-subtitle> {{ person.role }} </v-list-item-subtitle> </v-list-item-content> <v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar> </v-list-item> <v-card-actions> <v-btn outlined rounded text> Message </v-btn> </v-card-actions> </v-card> </template> <script> export default { name: ‘Person’, props: […]

How to connect API with vue.js

I have a small problem, don’t understand how to connect the frontend and backend so email and password are verified from the database. I have programmed this in Vue.js for Login and Register page. And now I need to connect it with API so data is verified from the database and it is hard quite […]

checkbox call another mutation when false

<label class=’custom-checkbox’> <input type=’checkbox’ :value=’item’ v-model=’checkBrands’> <span @click=’loadProducts(item.seoName)>{{ item.title }}</span> </label> In checkBrands, my brand names are transferred. When click on the checkbox, a mutation is called, which loads the products (api). this.$store.commit( ‘showFilteredList’, response.data.items ); If the checkbox is false, I would like to call another mutation. (which clears the list) How do I […]

Multiple audios interfering on the same web page in vue.js 2

I have a vue.js 2 frontend on which there are multiple chat bubbles. Each chat bubble is a vue component that has its own speaker subcomponent. When I click on the speaker, the goal is to read the audio corresponding to the text in the bubble. The speaker is a component that has as an […]

View not updating on data change

I’m currently working on a notification plugin in my project. I want every component to be able to trigger a notification like this: this.$notification({ msg: ‘error message’ }); To achieve that, I created a following plugin with a component: Notifications.js import Notifications from ‘./Shared/Components/Notifications’; import Vue from ‘vue’; export default { install: (app, options) => […]

Is it possible to attach multiple functions in V-for?

I have an array of elements, I need to render those elements in to a div and attach different on-click functions to each. <template> <div class="container"> <div v-for="option in options" :key="option.id" @click="option.clickFunction">. {{option}} </div> </div> </template> <script> export default{ data(){ return{ options: [ { id: 1, text: "option 1", clickFunction: "function1", }, { id: 2, […]

How to run "vue ui" with Node.js v17.2.0?

I need to use "vue ui" in my project but resently I have update node 14 to Node.js v17.2.0 and now I can’t open Vue GUI. Still Ihave a problem: at Object.readdirSync (node:fs:1390:3) at exports.readdir (/usr/local/lib/node_modules/@vue/cli/node_modules/@mrmlnc/readdir-enhanced/lib/sync/fs.js:18:20) at Object.safeCall [as safe] (/usr/local/lib/node_modules/@vue/cli/node_modules/@mrmlnc/readdir-enhanced/lib/call.js:24:8) at DirectoryReader.readNextDirectory (/usr/local/lib/node_modules/@vue/cli/node_modules/@mrmlnc/readdir-enhanced/lib/directory-reader.js:78:10) at Readable.DirectoryReader.stream._read (/usr/local/lib/node_modules/@vue/cli/node_modules/@mrmlnc/readdir-enhanced/lib/directory-reader.js:57:18) at Readable.read (node:internal/streams/readable:496:27) at readdirSync (/usr/local/lib/node_modules/@vue/cli/node_modules/@mrmlnc/readdir-enhanced/lib/sync/index.js:27:21) at Function.readdirSyncStat […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.