https://github.com/simsustech/unocss-preset-quasar
UnoCSS preset for Quasar Framework
https://github.com/simsustech/unocss-preset-quasar
Last synced: 5 months ago
JSON representation
UnoCSS preset for Quasar Framework
- Host: GitHub
- URL: https://github.com/simsustech/unocss-preset-quasar
- Owner: simsustech
- License: mit
- Created: 2025-04-02T10:57:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-03T08:17:48.000Z (7 months ago)
- Last Synced: 2025-12-12T10:05:38.095Z (6 months ago)
- Language: Vue
- Size: 2.02 MB
- Stars: 24
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- quasar-awesome - github - preset-quasar) | UnoCSS preset for Quasar Framework | v2.17+ | (Awesome Quasar [](https://github.com/sindresorhus/awesome) / Tutorials)
README
# unocss-preset-quasar
## Playground
https://stackblitz.com/edit/unocss-preset-quasar
## Installation
In your Quasar project:
```sh
pnpm add unocss unocss-preset-quasar @iconify-json/mdi
```
Modify `quasar.config.js` to include the following (check ./packages/docs/quasar.config.js) for an example:
```js
...
import UnoCSS from 'unocss/vite'
import { QuasarPreset } from 'unocss-preset-quasar'
import { MaterialDesign3 } from 'unocss-preset-quasar/styles'
const plugins = [
'AddressbarColor',
'AppFullscreen',
'AppVisibility',
'BottomSheet',
'Cookies',
'Dark',
'Dialog',
'Loading',
'LoadingBar',
'LocalStorage',
'Meta',
'Notify',
'Platform',
'Screen',
'SessionStorage'
]
export default defineConfig(async (ctx) => ({
...
vitePlugins: [
...
{
name: 'quasar-strip-sass',
enforce: 'pre',
transform(code, id) {
if (code.includes`import 'quasar/dist/quasar.sass'`) {
code = code.replaceAll(
"import 'quasar/dist/quasar.sass'",
"import 'virtual:uno.css'"
)
}
return code
}
}
],
extendViteConf(viteConf, { isClient }) {
...
viteConf.plugins.push(
UnoCSS({
enforce: 'pre',
presets: [
QuasarPreset({
style: MaterialDesign3,
plugins
})
]
})
)
}
},
framework: {
...
plugins
},
}))
```
## Development
```sh
git clone https://github.com/simsustech/unocss-preset-quasar.git
cd unocss-preset-quasar
pnpm i
pnpm run build
cd packages/dev # or cd packages/docs
pnpm run dev
```