Learning and sharing good experiences

Cannot use environment variables with Vitejs

I cannot access my environment variable prefixed properly "VITE_APP_TITLE" inside my code. I try to access it with "import.meta.env.VITE_APP_TITLE" in typescript. Do you have any ...

Adding reactive object to ref array and breaking the link

Vue3, composition api, newPost is reactive object, posts is ref array. I gather all fields of new post into newPost, and then on submit - want to add it to posts array like this. let found = ...

How to do a dark mode toggle button with VueJS and TailwindCSS?

I want do a dark mode button that when I click the Icon change(like this ) But I don't find how to do this(only slide buttons). Btw I enable tailwind dark mode in tailwind.js with darkMode: 'class'. ...

How to use FunctionDirective in Vue3?

I find in Vue3 Type Declaration about Directive, it is this export declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>; I believe most people ...

Vue3 Web Components events not working with custom wrapper

The WebComponents do work fine with this custom script but I have problems to. I want to be able to add event listener from outside to listen to the custom Vue events fired from within the component (...

Use vue3-cookies in custom plugin

I want to use vue3-cookies in my custom plugin, but whatever I do I keep getting undefined. MyPlugin.js export default { install: (app, options) => { app.config.globalProperties.$...

How to change one image when I click in dropdown with VueJS and TailwindCSS

I created (with your help) one dropdown that change text when are clicked with Vue, but I want that image appears too, but my code don't work, I've tried this: <div class="relative"> ...

Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)

EDIT: My codesandbox is working, but it's not perfect. In my actual project I've better utilized ts and am just making an if check for the charttype so the font doesn't paste on all the charts you ...

Global Sass Import & Usage - Nuxt 3 Static Assets

I am trying to import a global Sass stylesheet from the /assets directory and use stuff like variables and mixins defined there throughout the components. My nuxt.config.ts looks like this currently: ...

Vue 3: Simulate button click and pass the same $event as when actually clicked

I have the following button to which I'm adding a tailwind animate-pulse when it's clicked, which then is removed after the animation has finished playing: <button class=" ...

How to safely render tokenized HTML in Vue?

I have a text that contains certain tokens that need to be replaced into links. For example: @peter and @samantha went on a date in #Paris to see the movie #HouseOfGucci The result should be: <a ...

How to change a dropdown when click Vuejs + Tailwind CSS

I want to do a dropdown that when I click in one item the dropdown change, but I don't have ideia to how to do that and I don't find nothing about this. That's my code: <div> <div class=&...

How to update or show data of array in vue-cli

I have created a table which display the product data that was entered by the user and I have placed a column for operations, delete, modify, and details, but what i don't know is how can I edit or ...

Vuex4 state populated with api call is undefined in component

Please bare with me I am still new to using Vuex and don't quite understand it yet. I am using Vuex4 with localforage package for IndexedDB. My Vuex store is as follows: import { createStore } from '...

How do I get current route in onMounted on page refresh?

When reloading page, I want to get current route. Sadly route.name is undefined, router.currentRoute is RefImpl object, which has correct route with '/team' inside. router.currentRoute.value is just ...

Why is watch not reacting to changes of a property of an object in an Array of objects?

Consider the following (simplified) store. It holds an Array of "notes" (class objects): // store.ts import { reactive } from 'vue' import { Note } from 'src/lib/note' class Store { ...

How to decrease the amount of memory used during vue-cli build?

After following vue 3 code-splitting techniques by dynamically importing vue components in their own chunks the RAM usage has increased quite a bit From peaking around 45% to 86%. Each imported file ...

Vue3 class component access props

i use vue3 with class-component in typescript my class looks like: import {Options, Vue} from "vue-class-component"; @Options({ props: { result: Object } }) export default class ...

Paginated async Component doesn't trigger setup() on route change

I have a paginated component. The async setup() method is pulling data from an API to populate the page. It works fine when the route is directly loaded, but when I change the route to a different ...

Vuex Error ypeError: Object(...) is not a function

I am getting a blank white screen when running "npm run serve" .In the browser console it says that I am using ,Vue3 , Vuetifiy , Vuex4 and vue-router. Here is my index.js file for vuex ...

Vue 3 How update sum of all subtotals on change

I have an app that collects data from a form then pushes a new counter object to an array (counters) then renders a counter component that can increment and decrement to update a subtotal property for ...

Locale messages with using i18n custom block for Vue 3 + Vuetify 3

I want to have my locale messages separately for every component. I found an example how to do it for Vue 2, but I can't find how to do it for Vue 3 and Vuetify 3. This is what I've done: package.json ...

Alias for external links in ( vuejs or vuepress )

Question: What is the proper way to define an alias for external links in vuepress2 or vuejs? Problem: I have a documentation site hosted in github pages, I want to link some source files to ...

I can't get FETCH() data from API on VUE JS 3

I'm trying to obtain data from a SOAP API. My queries worked fine by curl/soap ui/postman. But I didn't manage to obtain data from fetch (using no-coars because I dev on local): Basic config is: ...

First 567891011121314 Last