About Theme4Nuxt

I created Theme4Nuxt in order to have a fast way to prototype and create themes for nuxtjs. I usually create apps from scratch, and after trying different UI tools for Vue or Nuxt like Vuetify, Bootstrap, etc. Also all the components that you get are really difficult to customize for your needs. I think that they are really good frameworks, but trying to use them to adapt to real customer needs comes a hard job. Many times I had to rewrite my own components, so I decide to go with another strategy.

I found that all of them are opinionated frameworks, that don't give you the real possibility to create you own custom design. Using them all your products will look the same.

Looking around for some tools and solution I found "tailwind" a css framework that is not a framework.

I think it's what a developer needs to create custom design feeling free to add your own components and fit them with the general UI/UX design. I mean, if you are a real developer usually you need to create custom components for different projects. I know this very well because when you think you found a good component, then a customer needs something like that but ... but with some changes or improvements.

So I started creating basic components, but I always had the same problem: the design.

Adapting the component to different custom design is a difficult job (it was) mostly on CSS. Tailwind solved my problem. With the easy way to implement real custom design using semantic classes it solves many of developer problems.

Then working on nuxt project I started creating my layout templates in order to prototype different themes/design. Since I always think that a good theme/design has to follow the semantic rules (header,section,aside,footer), I started to think to a solution that starting from a configuration file (a js/json file) create a layout template dinamically. My goals where:

• use configuration file to create a theme
• fast switching theme with no code rewriting on vue files
• follow semantic rules for generated pages (ssr rendering)
• easy changes to theme settings like colors etc.
• adding components dinamically (using webchunk method)
• preload data using server side functions and save to the store
• full responsive solution
• integration with existing API, components, other data
• integration with markdown files
• homepage design / internal page design