Build Accessible Apps 10x faster with Windi UI ⚡ ( WIP )
MIT License
Add Windi UI
to your project by running one of the following commands below:
# pnpm
pnpm add windi-vue
# yarn
yarn add windi-vue
# npm
npm install windi-vue
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/windi-vue/dist/theme/*.{js,jsx,ts,tsx,vue}'],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
}
With Windi UI, you have the flexibility to register components precisely as you wish:
To import all the components provided by Windi UI
, add WindiUI
in your main entry file as shown below:
import { createApp } from 'vue'
import windiTheme from 'windi-vue/dist/theme/windiTheme'
import WindiUI from 'windi-vue'
import App from './App.vue'
const app = createApp(App)
app.use(WindiUI, windiTheme)
app.mount('#app')
By doing this, you are importing all the components that are provided by Windi UI and in your final bundle all the components including the ones you didn't use will be bundled. Use this method of component registration if you are confident that you will use all the components.
Probably you might not want to globally register all the components but instead only import the components that you need. You can achieve this by doing the following:
createWindiUI
option as well as the components you need as shown below:import { createApp } from 'vue'
import './style.css'
import windiTheme from 'windi-vue/dist/theme/windiTheme'
import { WKbd, createWindiUI } from 'windi-vue'
import App from './App.vue'
const app = createApp(App)
const UI = createWindiUI({
prefix: 'T',
components: [WKbd],
})
app.use(UI, windiTheme)
app.mount('#app')
<template>
<div>
<TKbd>K</TKbd>
</div>
</template>
The prefix
option is only available for individual component imports.
Windi UI comes with an intelligent resolver that automatically imports only used components.
This is made possible by leveraging a tool known as unplugin-vue-components which lets you auto import components on demand thus omitting import statements and still get the benefits of tree shaking.
To achieve this you need to do the following:
unplugin-vue-components
package by running one of the following commands:
#pnpm
pnpm add -D unplugin-vue-components
#yarn
yarn add -D unplugin-vue-components
#npm
npm i -D unplugin-vue-components
main.ts
or main.js
file and set registerComponents
to false
as shown below:import { createApp } from 'vue'
import './style.css'
import windiTheme from 'windi-vue/dist/theme/windiTheme'
import { createWindiUI } from 'windi-vue'
import App from './App.vue'
const app = createApp(App)
const UI = createWindiUI({
registerComponents: false,
})
app.use(UI, windiTheme)
app.mount('#app')
vite.config.ts
or vite.config.js
file and add the following:// other imports
import { WindiUIComponentResolver } from 'windi-vue'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
// other plugins
Components({
resolvers: [
WindiUIComponentResolver()
]
}),
],
})
<template>
<div>
<WKbd>K</WKbd>
</div>
</template>
If you're encountering the TypeScript error: Cannot find module 'windi-vue/dist/theme/windiTheme' or its corresponding type declarations, you can follow these steps to resolve it:
windi-vue.d.ts
declaration file in your src
directory and inside it paste the following code:declare module 'windi-vue/dist/theme/windiTheme'
The error should now be resolved.
This issue is set to be fixed in the next release of Windi UI v0.0.1 Alpha
🥳 Well done, you can now go ahead and build your web application with ease.
Contributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository.
Developers interested in contributing should read the Code of Conduct and the Contributing Guide.
MIT License © 2023 Selemondev