Update 2022 For those who prefer Vite, there’s a tool called Laravel Vite which is a project based on PHP package, Vite plugin and preset, you could install it as follows : npx @preset/cli apply laravel:vite This removes the default config in the Laravel fresh project. For further details please check the different section in … 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
Passing objects to params was never supported in Vue-router It sort of worked in Router v3 with $router.push – the target component received the object. BUT as soon as user started using browser navigation (Back button) OR copy/pasting URL’s, this solution was broken (you can try it here – just click the button and then … Read more
This problem was fixed by a friend on the Vue.js forum. For anyone else who is running into this issue I’ll post his answer here. In short you need to create a separate file that will install the composition API plugin and call that file within the router/index.ts file to instantiate the plugin. It’s because … Read more
getCurrentInstance() was removed from the Vue 3 docs because it’s an internal API: Because the instance is an internal instance that exposes non-public APIs. Anything you use from that instance can technically break between any release types, since they are not subject to semver constraints. getCurrentInstance() was originally documented in 4-Oct-2020, but that was later … 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
The most direct replacement is app.config.globalProperties. See: https://vuejs.org/api/application.html#app-config-globalproperties So: Vue.prototype.$myGlobalVariable = globalVariable becomes: const app = createApp(RootComponent) app.config.globalProperties.$myGlobalVariable = globalVariable This is scoped to a particular application rather than being global as it was with Vue.prototype. This is by design, all ‘global’ configuration options are now scoped to an application. The relevant RFC is here: … 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
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