Vue 3 and Nuxt

The Vue components (NqButton, NqDialog …) are built on Reka UI and use the same Tailwind classes as the React ones. They ship in the same package.

pnpm add @fadymondy/nasaq vue

Add the styles to your Tailwind v4 entry CSS:

@import "tailwindcss";
@import "@fadymondy/nasaq/tokens.css";
@import "@fadymondy/nasaq/theme.css";
@import "@fadymondy/nasaq/web/styles.css";
@source "../node_modules/@fadymondy/nasaq/dist/vue";

Install the plugin to register every component, or import components one by one:

import { createApp } from "vue";
import { Nasaq } from "@fadymondy/nasaq/vue";
import App from "./App.vue";

createApp(App).use(Nasaq).mount("#app");

<script setup lang="ts">
import { NasaqProvider, NqButton } from "@fadymondy/nasaq/vue";
</script>

<template>
  <NasaqProvider brand="nasaq">
    <NqButton>Save changes</NqButton>
  </NasaqProvider>
</template>

Using NqToaster? Also import "vue-sonner/style.css" once.

NasaqProvider takes v-model:theme and v-model:locale. Arabic switches the direction to RTL and the currency to SAR.

Nuxt: add the plugin in plugins/nasaq.ts (export default defineNuxtPlugin((app) => app.vueApp.use(Nasaq))), and the CSS in nuxt.config css. No Tailwind: import @fadymondy/nasaq/nasaq.css instead of the CSS block.