Vuetiful
v0.47.0

Getting Started

Vuetiful is a component library for Vue applications. It is based on the design tokens of Skeleton, it leverages TailwindCSS and HeadlessUI. It is SSR compatible and provides both theming and dark mode support.

Install Vuetiful

console
npm install @skeletonlabs/skeleton @code-coaching/vuetiful

Install Tailwind

TailwindCSS is a framework with utility/helper classes for direct styling of HTML elements.

Vuetiful is created using TailwindCSS, you will need to add it as a dependency. However, you are not obligated to use TailwindCSS yourself.

console
npm install -D tailwindcss @tailwindcss/vite

Configure Vite

Add the @tailwindcss/vite plugin to your Vite configuration.

typescript
vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

CSS Imports

Add the following imports to your main CSS file, e.g. style.css or main.css.

css
style.css
@custom-variant dark (&:where(.dark, .dark *));

@import "tailwindcss";
@import "@skeletonlabs/skeleton";
@import "@code-coaching/vuetiful/vuetiful.css";

/* Import the themes you want to use */
@import "@code-coaching/vuetiful/themes/vuetiful";
@import "@skeletonlabs/skeleton/themes/cerberus";
@import "@skeletonlabs/skeleton/themes/catppuccin";
@import "@skeletonlabs/skeleton/themes/pine";
@import "@skeletonlabs/skeleton/themes/rose";
@import "@skeletonlabs/skeleton/themes/rocket";

Theme & Dark Mode

This will be added to your main component, e.g. App.vue.

typescript
App.vue - script setup
import {
  useDarkMode,
  useTheme,
  VShell,
  Vuetiful,
} from "@code-coaching/vuetiful";
import { onMounted } from "vue";

const { autoModeWatcher } = useDarkMode();
const { applyTheme, getThemeFromCookie, registerTheme } = useTheme();

// Register any Skeleton themes you imported in your CSS
registerTheme({ name: 'cerberus' });
registerTheme({ name: 'catppuccin' });
registerTheme({ name: 'pine' });
registerTheme({ name: 'rose' });
registerTheme({ name: 'rocket' });
// vuetiful is registered by default

onMounted(() => {
  const theme = getThemeFromCookie(document.cookie);
  applyTheme(theme); // sets data-theme on the <html> tag and handles the theme cookie
  autoModeWatcher(); // automatically use the dark preference of the OS and handles the dark mode cookie
});
html
App.vue - template
<Vuetiful>
  <v-shell fixed-header-height="50px">
    <template #fixedHeader>
      <div class="flex h-[50px] items-center">
        <div class="mx-4 font-bold">Vuetiful</div>
      </div>
    </template>
    <router-view />
  </v-shell>
</Vuetiful>

Suggestions

Prettier

Prettier is a code formatter that will help you keep your code clean.

Adding prettier-plugin-tailwindcss will make it such that Tailwind classes are automatically sorted.

console
npm install -D prettier prettier-plugin-tailwindcss
console
.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

VSCode Extension

Tailwind CSS IntelliSense

This will provide autocompletion for TailwindCSS classes. It will also autocomplete custom classes provided by Vuetiful.

VSCode Settings

Open the settings ⌘ + Shift + P or Ctrl + Shift + P and type Preferences: Open User Settings (JSON).

plaintext
settings.json
{
  // ... other settings

  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": [
    "class\w+\s*[:=]\s*['"`]([^'"`]*)['"`]", // matches classCustom="tailwind-class" or classCustom:'tailwind-class'
    "class(?:-[a-z]+)+[:=]['"`]([^'"`]*)['"`]" // matches class-custom="tailwind-class" or class-custom:'tailwind-class'
  ]
}

This will provide tailwind autocomplete in all props and variables starting with class.