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.
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 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.
I made a VueJS 3 app (WebPack 3.12.0), with prerendering (not serverside), and the content of some page are loaded via ajax request, so google bots can't see the text (this is the problem here).
I read that I need to use SSR to do this. So I tried a couple of tutorials but no one seem to works (some do nothing, others crashes my app). I don't really know which one is the best and they are all using differents solutions.
First of all, do I need to use SSR to achieve what I want ? And if yes, anyone have a good tutorial (and a working one) ?
Thanks guys !
The best solution for SSR with Vue is to use Nuxt.js: https://nuxtjs.org/
It's not that complex, working really great !
It will probably be migrated to Vue3 really soon (Nuxt 2.15.2 is using Vue2 still), maybe even today during the JS World Conference.
Also, you can check those videos of Debbie who does a nice job of explaining things in a clear and simple way: https://www.youtube.com/c/DebbieOBrien/videos
So i was wondering is there a comprehensive example or library out there that one could use for navigation on web as well as native side.
Maybe a working example one could try out with modal, drawers, and all that fancy stuff.
What is it like using react-navigation 3.0 for web? Is it fully compatible? Is there an example online one could work with and draw inspiration from?
The example on react-navigation documentation is pretty contrived and not really clear, is there someone who has worked on such project.
Thanks.
Here are a few sources i have come across.
https://blog.bitsrc.io/how-to-react-native-web-app-a-happy-struggle-aea7906f4903
How about using an HOC as provided in the above case?
Seems like a neat solution.
https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0
https://reactnavigation.org/blog/#ecosystem-and-web-support
https://reactnavigation.org/docs/en/web-support.html
There is no perfect example of rn-web plus r-navigation.
Have a look at: https://github.com/react-native-elements
PS:Honestly this is (for me) a dependency hell "r, rn, rn-web, rn-dom, babel, expo, expo-cli". Frameworks & repos owners around the RN topic do not seems too concerned about the react-native-web topic anyway.
What is the most elegant way to get a riot based UI today?
i'd love the following points to be addressed:
A proper code-mapping for easy debugging
A good way to bundle the application (so far i used Webpack and JSPM)
It would be lovely if it would work elegantly with Typescript.
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
If you have more items for consideration - please add them....
Thanks for asking these questions. I have tried to answer to all your questions hoping they could be useful also to other Riot.js users
A proper code-mapping for easy debugging
the riot compiler generates simply javascript code without modifying too much the structure of your original source code. Any modern browser should be able to provide with debugger breakpoints and console calls all the debugging tools you need. Check for example the stack trace of this error you don't need much more to figure out where it's coming from.
A good way to bundle the application (so far i used Webpack and JSPM)
In this repo we provide 3 different javascript bundle examples: rollup, webpack, riot-compiler. I personally prefer rollup but you can (and should) use whatever works best for you and your team.
It would be lovely if it would work elegantly with Typescript.
The riot public methods are already available as Typescript interfaces:
- https://www.npmjs.com/package/#types/riot
- https://www.npmjs.com/package/#types/riot-route
I am not a typescript user and that's why I will not invest time in making examples in a technology I don't use but PR are welcome
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
I recommend you to just use Tag files because riot was designed as component library and it embraces completely the philosophy of components composition vs class inheritance. If you have code you share across several components you can either use mixins or import it with your bundler directly in your tags see for example
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
Riot 3 will be not compatible with Riot 4. (that will be a full rewrite) I can't recommend any best practice to make your code portable to Riot 4. Remember that Riot 3 will be still supported and your code will run even on IE9 for the next 10 years. Once riot 4 will be released and the API will be stable I can provide more hints about a migration path.