I recommend this solution by antfu, which is IMO by far the best approach to work with any kind of icons: https://github.com/antfu/unplugin-icons Check the more in-depth article explaining why and how the whole thing works. Here’s a quick way on how to use it with Nuxt3, first off the requirements: be sure to use Node … Read more
As of today, Nuxt2 is still using Webpack4 so ModuleFederationPlugin will not be a possible solution. Nuxt v3 will come with Webpack’s v5 support and you’ll probably be able to try it then. I also heard that the same could be used with Vite btw. As a general answer, you need to understand that a … Read more
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
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
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
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
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
As suggested in official docs you could use mitt library to dispatch events between components, let suppose that we have a sidebar and header which contains a button that close/open the sidebar and we need that button to toggle some property inside the sidebar component : in main.js import that library and create an instance … Read more