I really love using Svelte but at this moment, one of its cons is the lack of ready-to-use components for Svelte. I want to use vue-atlaskit in a project, but I really prefer using Svelte. Is it possible to use vue components inside a Svelte app?
I guess it all should be just "web-components", but I really don't know how to do it.
I checked with people in the Svelte Discourse. There is no simple way to do that. The suggestion is to convert the UI components I need from Vue to Svelte.
While not a comprehensive answer, I would add some findings on the topic:
As you suggested, I would try with Web Components. According to Custom Elements Everywhere the support for Web Components is fairly high for both frameworks. Vue states that the support is 100% although the site shows less so there is some discrepancy. But basic tests pass 100%. Svelte is also at 100%. This paints a fairly positive picture.
There is another question on SO that refers to consuming Web Components in Svelte.
Here is another reference article on how to create web components with Vue 3.
Note: I will try to update the answer as I learn more. I will be testing this out on a migration of a PWA from Vue to Svelte, where I plan first to use Svelte components in an existing Vue app and then perhaps switch to using Vue components in a Svelte app, depending on how things go with rewriting.
Related
I'm very new to nuxt3 and want to know if i't possible to use it with quasar. specially that quasar has his own ssr system .
does anyone successfully created a project with these two frameworks ?
i tried to look if there is any open source projects with these two frameworks but i couldn't find anything useful
Got that question answered here: https://stackoverflow.com/a/67604708/8816585
The TLDR is why would you mix both if they are doing the same thing. What does Quasar have over Nuxt (or the opposite)? Take one, it will allow you to do anything from the other afterward if needed.
Quasar is already 147kB, not sure that it's wise to add that to a Nuxt3 app anyway.
I wanted to know how to use Microfrontends with Nuxt or at least Vue.
Is there a plug & play simple solution to have it working quickly?
I've heard about Webpack's v5 ModuleFederationPlugin for example, is this a valid thing to start my Nuxt project?
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 Microfrontend is not something simple to do. It is more about how you do structure your app in the larger scope.
It's like having a micro-service on the backend: it can be done is multiple ways and it all depends of the needs of the company/team.
If you do create a Vue2 or Vue3 project with the Vue CLI, you'll still have Webpack v4. You can probably try to make the upgrade yourself if planning to use ModuleFederationPlugin.
As an alternative, there is single-spa. This is a way of doing it (probably not the only one).
Here is a podcast show talking about the subject in depth: https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
It may be relevant to understand the general way this is working and also the pro/cons.
If you're not satisfied with this approach, there are a lot of articles on the Web talking about Microfrontends and some Google-fu will be enough to give you an alternative way.
I've currently got a library of Vue2 components I've created and use in several projects via a private npm repo. I'm starting a new project now in Vue3 but I'd like to use the old components if possible. Can I mix versions like that? Also, can components be mixed the opposite way (Vue3 components in Vue2 apps)?
Vue2 components can be used with Vue3 and Vue3 components can be used in Vue2.
HOWEVER...
As long as you use Classic Vue Js class-based API you should have no issues. Even though some of the underlying technology has been rebuilt, the Vue team has worked hard on making that compatible, though I'm sure there will be some edge cases here and there.
The problem will be if you use the Composition API in making your components. The composition API is built for Vue3, and although you can have a similar experience in Vue2 via a plugin, you are likely going to encounter issues.
Furthermore, even if you are not using the Composition API, you may end up using plugins that do rely on it, which may end up not regression testing against Vue2.
Vue3 is still in RC
At the time of writing, Vue 3 was still being released as a RC version. This may change very soon, there's not guarantee.
If you're going to use Vue3 the same way as Vue2, there's little benefit to switching. If you are going to use the new features (like the Composition API) then you might end up not being 100% compatible.
list of breaking changes
https://v3-migration.vuejs.org/breaking-changes/introduction.html#breaking
By the sounds of it, Vue2 will have another (LTS) release that will address compatibility issues.
The official recommendation is to start new projects with Vue2 still.
I develop my own vue components library, and this components have a lot of texts that needs to be localized. vue-i18n doesn't support this, because it should be attached to Vue (e.g. Vue.use(VueI18n)), but in case of component library, it will result in conflict.
I need to have independent translation files in my library, totally separated from my application (to prevent conflicts)
I'm struggling to find any answer to this question in other sources, and I hope someone can give me example for this case. Thanks in advance.
Well it really seems that vue-i18n is not tailored for use in component libraries for reasons you are mentioning (attaching itself into Vue.prototype + conflict with user's code).
I don't know what features of vue-i18n are you using but if it's just simple translation, it seems rolling your own custom solution with an option to plug in the i18n library of user's choice would be the best. It's not that hard. Most of the component libraries are going that way...
You can take a look at how "big guys" do it - in this case Vuetify.
Docs
Code
I have been trying Vue.js with ASP.Net Core for the last week and it seems quite powerful.
However, I have seen different approaches in the way how files are organized and modules written.
In the javascript spatemplate, they use, I would say this structure with ts, html, css files:
|_components
|_counter
*counter.ts
*counter.css
*counter.html
In other starter Vue.js templates, we have this structure with one single vue file:
|_components
|_counter.vue
Is there a limitation/advantage in using one over the other? Is one being more recent and should superseed the other format?
I have also see that they are different way of writing component for Vue in Typescript.
The default one presented on the Vue website and the other way using the vue-class-component or the vue-property-decorator which looks more natural to me and is recommended on the Vue website as it seems to solve some issues: link.
Again if it is that good, why shouldn't it become the standard? Does the default style gives more flexibility compared with the 'vue-class-component' style?
Sorry for the basic questions, just trying to get the good directions from the beginning.