News Articles Vue.js

Creating a Vue component in typescript with a 3rd party js N

Specifically, I’m looking to create a common Component that with in a shared package based on vuejs-quill. However because I’m writing the components using typescript and the npm is JavaScript and doesn’t include type definitions I’m having some trouble. I’ve tried to create my own .d.ts file for the module but how am I to […]

Deployment Laravel + Vue to Apache Webhost

I have local setup with laravel + inertia starter kit (vue). Everything works fine, but not sure about deployment (do I need node there, etc…). What are the steps to deploy this on an Apache webhost environment? Grateful for any help Source: Vue – Stack Overflow

How to solve the problem that the message cannot be used when the element-plus is introduced locally?

Recently I am trying to write element-plus casually, so I did not configure the Node environment and build the vue scaffolding. It was referenced locally through the way of cdn file download. All aspects of the components can be used normally, but I am trying to write the message prompt box js The components don’t […]

"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 […]

Logged user dissapear in browser refresh

I’m working on a project using Vue 3 and Composition API, and I’m developing login function, and it works fine, but when I refresh the page, the logged user dissapear from it and I don´t know why it’s happening it. Here´s my userModule file, where I create the ref of the users and some others […]

VueJS – Template not rendering anything

I am super new to vue js and I am trying to the switch toggle shown here: https://headlessui.dev/vue/switch So here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Site</title> <!– Fonts –> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap"> <script src="https://kit.fontawesome.com/7de28896bc.js" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <!– Styles –> <link rel="stylesheet" […]

How to write test for RepositoryFactory in Vue.js/Nuxt.js

Summery I’ve implemented RepositoryFactory pattern for API connection in Vue.js/Nuxt.js application. https://medium.com/canariasjs/vue-api-calls-in-a-smart-way-8d521812c322 hogeRepository.ts import { NuxtAxiosInstance } from ‘@nuxtjs/axios’ type queryData = { q: string | null } export const HogeRepository = ($axios: NuxtAxiosInstance) => ({ createResource (apiVersion: Number) { return `v${apiVersion}/meetings` }, get (data: queryData, version = 1) { const url = `${this.createResource(version)}` return […]

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, […]

Module ‘"*.vue"’ has no exported member ‘Hoge’. Did you mean to use ‘import Meeting from "*.vue"’ instead?ts(2614)

Summery I’ve implemented Vue.js/Nuxt.js application. In the application, I import vue file into typescript file. typescript file import { Hoge } from ‘~/layouts/default.vue’ ~/layouts/default.vue <script lang="ts"> export interface Hoge{ hoge: string } </script> But I shows error on { Hoge } saying Module ‘"*.vue"’ has no exported member ‘Hoge’. Did you mean to use ‘import […]

Gridsome context data loss on page refresh

I have a Gridsome site that works well locally using Gridsome develop but once I build the site it does not work as expected. The pages that I am having problems with is pages build dynamically using create page function and passing context data to. While navigating the site the data appears but once I […]

How to select text inside input when the input get mounted (Vue3 )

I have this form that I created, basically what its doing is creating a new input with a random value each time I click on ADD_INPUT button. the thing I want is each time I create a new INPUT with random value the value get selected. Sorry for my very bad English. [![enter image description […]

How can i save changes that i enter in textarea

I have this arhitecture When I enter data in the field in TaskDetailsModal.Vue and click on the Save button, I need to change this task everywhere, and when I click on the Close button, on the contrary, I do not save the changes. I am unable to transfer or change this particular task, how can […]

Awaiting debounced function in async vue created

I was using this in projects before and now suddenly it seems to not be working. Here’s my vue component: async created() { await this.reload(); this.selected = this.items.find(item => item.uuid === this.value) console.log(‘finished’); } Then in my methods: methods: { reload: debounce(async function () { // Communicate with server console.log(‘finished – in method’) } }, […]

Hide functions/vuex module from clientside?

I have a vuex module that i want to be used/imported only when the user call its, but when i import it in the vuex.modules it imports globally so the functions can be viewed from devtools. I read functions/modules could be hidden with SSR either using Nuxt or another library. Is this possible? is there […]

How to correctly use mavon-editor like markdown editor in Vue3.js apps?

I tried to install mavonEditor as markdown editor for my latest vue3.js app and also used vite for building vue.js apps. First of all, I followed the document of mavonEditor, mavon component is not defined. I installed mavon-editor(v2.10.4) using by npm. And then, change the main.js like below. import { createApp } from "vue"; import […]

Using computed value in v-for (Vue.js)

I’m currently making bitcoin trading web app (personal project. Not a business one) I have a bunch of cryptocurrencies prices from API, and showing it all by using v-for loop. here’s part of my code: <tbody class="text-sm"> <tr v-for="coin in props.coins" :key="coin.code" class="hover:bg-zinc-600"> <td class="p-1"> <div class="font-semibold">{{ coin.name }}</div> <div class="text-xs text-gray-400">{{ coin.code }}</div> </td> […]

Trying to make a function asynchronous to perform an action only after uploading data

Edited to add question at the bottom: This currently functions appropriately, except that it’s not running asynchronously (which I thought it was hence the async await attempts). My question is how to make a submit flow asynchronous so that I can perform an action (in this case prompt the user for preferred next steps) only […]

Unable to listen to Solidity event in Vue app

I’m trying to reproduce the Cryptozombie tutorial using a local environment composed of a local Hardhat Node and a Vue.js application. In my Solidity contract, I defined an event and emitted it when creating a new Zombie. I was able to link my ethereum wallet and exchange some ETH between accounts using Metamask, but in […]

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.