What is Tohama?

Tohama provides packages to help you develop and deploy web apps. It is divided into separate packages, so you can develop your app depending on your needs.

Packages

@dija/tohama-vite

This package is a vite plugin which provides out-of-the-box configurations for vite and support for development tools such as JSX, Sass, PWA, and Bundle Visualizer. It also reads your tohama.config.ts and css.config.ts files in order to handle CSS transpiling, HTML meta tags and manifest generation, and UnoCSS scanning.

For CSS: First, it takes your UnoCSS configurations and combines them with our default configurations. Second, it generates your app's Sass based on those configurations. Third, it takes the components libraries you specify in cssTranspile to generate on-demand CSS based on the same configurations.

@dija/tohama-assets

This package contains static assets such as fonts. It is used by @dija/tohama-vite to automatically resolve dynamic imports to its content.

@dija/tohama-shared

This package contains types and utilities that are used by other packages. Most importantly, it has the use-context composable which hosts your app's runtime configurations.

@dija/tohama-state

This package provides a safe and easy way to store shared state.

@dija/tohama-use

This package contains composables to help you with common tasks.

@dija/tohama-components

This package contains highly customizable components with extensive APIs. All components are designed carefully to complement each other. They are styled with UnoCSS in order to be fully customizable.

The components are tree-shakeable and side effect free. By default, they do not import their styling automatically, which is done to eliminate the need for transpiling. You can include components styling on-demand by adding @dija/tohama-components to the cssTranspile property in tohama.config.ts.

@dija/tohama-plugins

This package contains plugins that all production-ready apps need.

@dija/tohama-validation

This package contains validation rules which can be used to validate user input.

@dija/tohama-spa

This package is specifically used with SPA apps. It takes care of the required configurations that are needed to initialize vue-router, @unhead/vue, PWA, use-context, use-popups, locales, routes, and localized routes.

@dija/tohama-nuxt

This package is specifically used with Nuxt 3 apps. It takes care of the required configurations that are needed to initialize use-context and use-popups. In addition, it automatically adds and configures the VitePluginTohama plugin from @dija/tohama-vite.