I can use #iconify/vue to use iconify in a Vue3 project.
Is it the best way or does it still need optimization?
How can I make it into an import with a small size?
This is by far the best approach right now: https://github.com/antfu/unplugin-icons
Simple, you make the configuration once, you have full customization and flexibility.
Here is a more in depth answer of mine (regarding Nuxt): https://stackoverflow.com/a/72055404/8816585
Related
I'm using Vuetify Vue3 for a project. There are some components missing that are available in other fw. Does this cause messup in the project by installing extra fw for one component?
You can indeed have several frameworks at the same time, but it may drastically impact your performance and lead to messy code because of the difference in APIs.
If you are meaning, CSS like a UI framework (Vuetify, Bulma, Bootstrap etc...), the answer is the same. Doable but quite heavy.
Nothing stopping you from going crazy by using all of them!
Technically, you can use at the same time, but if you mean CSS frameworks sometimes it can lead to conflict between classes.
It is not recommended and best practice to do that because it can cause a conflict and also can make your application heavy.
But it is not forbidden and you are free to try.
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.
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.
I am using elm-ui. The header feature is amazing, but does not seem to be responsive by default. I don't see anything about responsive design in the documents. Is there a way to implement this feature within the elm-ui ecosystem, or do you need to integrate it into bootstrap or something responsive?
I did a bit of digging around the elm-ui github repo, it looks like indeed there is no answer for the responsive bit. And in general, elm really doesn't have an answer for responsiveness (Excluding elm-style-elements). I'd reccomend using media queries.
Check out this article to get started.
I am currently getting my head around aspdotnetstorefront.
My initial thought is to build usercontrols or something else instead of xmlpackages for extending the functionality of aspdotnetstorefront. Is there a reason why I have to use the xmlpackages instead of something else?
There are a few reasons I would choose to use the XMLPackages. First, it is what the products use for layout, so it is easier to replace existing packages. ASPDNSF has built a bunch of functions for the XMLPackages to give you access to their core functionality. You can use the XMLPackages in topics and the templates, so no need to roll your own code. Finally, if you have simple html and javascript to return, it is nice to just use XSLT to do it. Yes, the learning curve is a bit steep, but depending on what you are doing, it makes life easier.
HTH
Wade