VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations

In the src folder add the file shims-vue.d.ts with the following content : Vue 2 : declare module “*.vue” { import Vue from ‘vue’ export default Vue } Vue 3: declare module ‘*.vue’ { import type { DefineComponent } from ‘vue’ const component: DefineComponent<{}, {}, any> export default component } and import the component with … Read more

Vue 3 Vite – dynamic image src

Update 2022: Vite 3.0.9 + Vue 3.2.38 Solutions for dynamic src binding: 1. With static URL <script setup> import imageUrl from ‘@/assets/images/logo.svg’ // => or relative path </script> <template> <img :src=”imageUrl” alt=”img” /> </template> 2. With dynamic URL & relative path <script setup> const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href </script> <template> <img :src=”imageUrl” alt=”img” /> … Read more

Vue 3 reactivity not triggered from inside a class instance

As another answer explains, reactive creates proxy object to enable the reactivity. this in constructor refers to original MyClass instance and not a proxy, so it cannot cannot be reactive. This indicates the probem in the code. reactive takes into account synchronous operations that occur in MyClass constructor. It’s an antipattern to perform asynchronous side … Read more

ref vs reactive in Vue 3?

Key Points reactive() only takes objects, NOT JS primitives (String, Boolean, Number, BigInt, Symbol, null, undefined) ref() is calling reactive() behind the scenes Since reactive() works for objects and ref() calls reactive(), objects work for both BUT, ref() has a .value property for reassigning, reactive() does not have this and therefore CANNOT be reassigned Use … Read more

Using Bootstrap 5 with Vue 3

Bootstrap 5 no longer needs jQuery so it’s easier to use with Vue, and no longer requires a library like bootstrap-vue. Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package.json… npm install –save bootstrap npm install –save @popperjs/core Next, add the … Read more

tech