Category: Raindrop

How to add icons in Vue

npm install --save-dev @iconify/vue
import { createApp } from "vue";
import App from "./App.vue";
import { Icon } from "@iconify/vue";

const app = createApp(App);

app.component("Icon", Icon);

app.mount("#app");

<Icon icon="carbon:running" width="42" height="42" />

How to add Google Fonts in Vite

npm install --save-dev unplugin-fonts
import { defineConfig } from "vite";
import Unfonts from "unplugin-fonts/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Unfonts({
      google: {
        families: [
          {
            name: "Nunito",
            styles: "wght@300;400;700",
          },
        ],
      },
    }),
  ],
});

How to change the default font in Tailwind CSS

style.css

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Nunito", system-ui, sans-serif;
  }
}

How to automatically import Vue components

npm install --save-dev unplugin-vue-components

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Components()],
});

How to install PrimeVue with Tailwind CSS

npm install primevue

Download the latest preset https://github.com/primefaces/primevue-tailwind/releases to src/presets

src/main.js

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Aura from "@/presets/aura";

const app = createApp(App);

app.use(PrimeVue, {
  unstyled: true,
  pt: Aura,
});

app.mount("#app");

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "rgb(var(--primary))",
        "primary-inverse": "rgb(var(--primary-inverse))",
        "primary-hover": "rgb(var(--primary-hover))",
        "primary-active-color": "rgb(var(--primary-active-color))",

        "primary-highlight":
          "rgb(var(--primary)/var(--primary-highlight-opacity))",
        "primary-highlight-inverse": "rgb(var(--primary-highlight-inverse))",
        "primary-highlight-hover":
          "rgb(var(--primary)/var(--primary-highlight-hover-opacity))",

        "primary-50": "rgb(var(--primary-50))",
        "primary-100": "rgb(var(--primary-100))",
        "primary-200": "rgb(var(--primary-200))",
        "primary-300": "rgb(var(--primary-300))",
        "primary-400": "rgb(var(--primary-400))",
        "primary-500": "rgb(var(--primary-500))",
        "primary-600": "rgb(var(--primary-600))",
        "primary-700": "rgb(var(--primary-700))",
        "primary-800": "rgb(var(--primary-800))",
        "primary-900": "rgb(var(--primary-900))",
        "primary-950": "rgb(var(--primary-950))",

        "surface-0": "rgb(var(--surface-0))",
        "surface-50": "rgb(var(--surface-50))",
        "surface-100": "rgb(var(--surface-100))",
        "surface-200": "rgb(var(--surface-200))",
        "surface-300": "rgb(var(--surface-300))",
        "surface-400": "rgb(var(--surface-400))",
        "surface-500": "rgb(var(--surface-500))",
        "surface-600": "rgb(var(--surface-600))",
        "surface-700": "rgb(var(--surface-700))",
        "surface-800": "rgb(var(--surface-800))",
        "surface-900": "rgb(var(--surface-900))",
        "surface-950": "rgb(var(--surface-950))",
      },
    },
  },
  plugins: [],
};

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-50: 236 253 245;
  --primary-100: 209 250 229;
  --primary-200: 167 243 208;
  --primary-300: 110 231 183;
  --primary-400: 52 211 153;
  --primary-500: 16 185 129;
  --primary-600: 5 150 105;
  --primary-700: 4 120 87;
  --primary-800: 6 95 70;
  --primary-900: 4 78 56;
  --primary-950: 2 44 34;
  --surface-0: 255 255 255;
  --surface-50: 250 250 250;
  --surface-100: 244 244 245;
  --surface-200: 228 228 231;
  --surface-300: 212 212 216;
  --surface-400: 161 161 170;
  --surface-500: 113 113 122;
  --surface-600: 82 82 91;
  --surface-700: 63 63 70;
  --surface-800: 39 39 42;
  --surface-900: 24 24 27;
  --surface-950: 9 9 11;

  --primary: var(--primary-500);
  --primary-inverse: var(--surface-0);
  --primary-hover: var(--primary-600);
  --primary-active-color: var(--primary-600);

  --primary-highlight-opacity: 0.1;
  --primary-highlight-inverse: var(--primary-700);
  --primary-highlight-hover-opacity: 0.2;
}
.dark {
  --primary: var(--primary-400);
  --primary-inverse: var(--surface-900);
  --primary-hover: var(--primary-300);
  --primary-active-color: var(--primary-300);

  --primary-highlight-opacity: 0.2;
  --primary-highlight-inverse: var(--surface-0);
  --primary-highlight-hover-opacity: 0.3;
}

.customized-primary {
  &:not(.dark) {
    --primary: var(--primary-950);
    --primary-inverse: var(--surface-0);
    --primary-hover: var(--primary-800);
    --primary-active-color: var(--primary-900);

    --primary-highlight-opacity: 1;
    --primary-highlight-inverse: var(--surface-0);
    --primary-highlight-hover-opacity: 0.8;
  }
  &.dark {
    --primary: var(--primary-50);
    --primary-inverse: var(--surface-950);
    --primary-hover: var(--primary-100);
    --primary-active-color: var(--primary-100);

    --primary-highlight-opacity: 0.1;
    --primary-highlight-inverse: var(--surface-0);
    --primary-highlight-hover-opacity: 0.2;
  }
}

How to add alias @ to src in Vite

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});