nuxt-quasar-vite
v1.1.0
Published
Quasar Framework UI for Nuxt
Downloads
145
Readme
Quasar for Nuxt
This Nuxt module expose UI Components and Utils (Composables, Directives and Plugins) from Quasar Framework UI to Nuxt. This module only can be use on Nuxt with Vite: nuxt ^3.0.0-rc.2
.
Pros
- Nuxt SSR for Quasar components.
- Quasar components that are auto imported by Nuxt.
- Quasar directives.
- Quasar composables that are auto imported by Nuxt.
- Quasar plugins, opt-in imported.
- Quasar variables on SFC styles.
- Quasar utils that are auto imported by Nuxt.
- Nuxt modern and universal, develop and production Nitro server (with API and Middlewares).
- Nuxt SSG static site generate.
Cons
- No Quasar Develop Modes (Electron, Capcitor, BEX, etc.)
Setup
At your Nuxt project folder:
# Install dependencies
pnpm add -D quasar sass @quasar/extras nuxt-quasar-vite
@quasar/extras
is optional.
At nuxt.config.ts
add module name:
defineNuxtConfig({
//...
// Add nuxt-quasar-vite to modules
modules: ["nuxt-quasar-vite"],
//...
});
Add Quasar components to your vue files:
<!-- app.vue or layouts/default.vue -->
<template>
<QLayout view="hHh lpR fFf">
<QPageContainer>
<QPage padding class="column flex-center q-gutter-xl">
<!-- if on layouts use `slot`. if on app.vue use `NuxtPage` -->
<slot />
</QPage>
</QPageContainer>
</QLayout>
</template>
Nuxt Starter Template
There is available a Starter Template. Repository
In this template are configured:
- Default Layout:
layouts/defaults.vue
- Default Pages like
index.vue
- Use
@nuxt/content@^2.1.1
and@nuxt/image-edge
, and modifiesProseImg
to useQImg
.
Install
# <nuxt-app> it's the name of your project folder
pnpx nuxi init -t gh:memotux/nuxt-quasar-template <nuxt-app>
cd <nuxt-app>
pnpm install
Config
Defaults
quasar : {
sassVariables: true,
css: ['quasar/src/css/index.sass'],
plugins: ['Notify'],
config: {
dark: true
}
}
Options
At nuxt.config.ts
you can add a quasar
configKey object:
defineNuxtConfig({
// Optionaly use 'quasar' configKey
// ...
quasar: {
// Optional string | boolean
sassVariables: "assets/quasar.variables.scss",
// Optional string[]
// If you use animations, add Quasar Extra CSS animation URL here.
// NOTE: This CSS files are inserted on module plugin template, NOT on `nuxt.config`.
css: ["@quasar/extras/material-icons/material-icons.css"],
// List of extra Quasar Plugins
// auto-instaled: [Platform, Body, Dark, Screen, History, Lang, IconSet]
// optional: [AddressbarColor, AppFullscreen, AppVisibility, BottomSheet, Dialog,
// LoadingBar, Loading, Notify, LocalStorage, SessionStorage]
plugins: ["Dialog"],
/* Quasar UI config -- you'll notice in Quasar docs when you need it */
config: {
dark: false,
},
},
// ...
});
Quasar Utils
For use Quasar Utils autoimport feature, prefix quasar util function name with q
character. This is a difference with Quasar Framework, but make using utils safe.
<script setup>
// Autoimport Quasar Util `date` using `qdate`
const newDate = qdate.addToDate(new Date(), { days: 7, months: 1 });
// Or use explicit #imports if you want to destructurate
import { qdate } from "#imports";
const { addToDate } = qdate;
const newDate = addToDate(new Date(), { days: 7, months: 1 });
</script>
Quasar SCSS variables
Quasar SCSS variables and custom sassVariables
are auto imported on your SASS/SCSS assets files.
.container {
border-color: $primary;
}
For more information, you can read the Quasar Vite Plugin docs, and quasar.config.ts
framework docs.
TODO
- Add to quasar configKey animations.
- Add to quasar configKey iconSet and icon libraries.
Development
git clone https://github.com/memotux/nuxt-quasar.git
- Run
yarn dev:prepare
to generate type stubs. - Use
yarn dev
to start playground in development mode.