npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-quasar-vite

v1.1.0

Published

Quasar Framework UI for Nuxt

Downloads

99

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 modifies ProseImg to use QImg.

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.