frontend-styles

Project setup

1. Run npm install @akquinet/akq-styles or yarn add @akquinet/akq-styles for import package

2. Add to nuxt.config.ts

plugins: [
    "~/plugins/akq-styles.js",
    "~/plugins/set-css-variables.js"
],
vite: {
    optimizeDeps: {
        exclude: ["@akquinet/akq-styles"],
    },
},

3. add to tailwind.config.ts

content: [
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/@akquinet/akq-styles/**/*.{vue,js,ts,jsx,tsx,scss,css}",
    "./assets/css/**/*.{scss,css}", // Add this line
],

4. create a plugin for import components called akq-styles.js with this code

import { defineNuxtPlugin } from "#app";
import {
  AkqInput,
  AkqDatepicker,
  AkqDatepickerMulty,
  AkqButton,
  AkqSelect,
  AkqTextarea,
  AkqCheckbox,
} from "@akquinet/akq-styles";

// Import SCSS files
import "@akquinet/akq-styles/src/assets/scss/button.scss";
import "@akquinet/akq-styles/src/assets/scss/colorPicker.scss";
import "@akquinet/akq-styles/src/assets/scss/datepicker.scss";
import "@akquinet/akq-styles/src/assets/scss/input.scss";
import "@akquinet/akq-styles/src/assets/scss/select.scss";
import "@akquinet/akq-styles/src/assets/scss/checkbox.scss";
import "@akquinet/akq-styles/src/assets/scss/textarea.scss";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("AkqInput", AkqInput);
  nuxtApp.vueApp.component("AkqDatepicker", AkqDatepicker);
  nuxtApp.vueApp.component("AkqDatepickerMulty", AkqDatepickerMulty);
  nuxtApp.vueApp.component("AkqButton", AkqButton);
  nuxtApp.vueApp.component("AkqSelect", AkqSelect);
  nuxtApp.vueApp.component("AkqTextarea", AkqTextarea);
  nuxtApp.vueApp.component("AkqCheckbox", AkqCheckbox);
});

5. create a plugin for setting css variables called set-css-variables.js

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin((nuxtApp) => {
  const mainColor = "#05806d";
  const textColor = "#3a3a3a";

  // Set the CSS variable
  document.documentElement.style.setProperty("--primary-color", mainColor);
  document.documentElement.style.setProperty("--text-color", textColor);
});

Compiles and hot-reloads for development

yarn dev or npm run dev

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint