Vuetiful
v0.37.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@next @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/forms postcss autoprefixer

Initialize Tailwind

console
npx tailwindcss init -p

This will create a file named tailwind.config.js and a file named postcss.config.js .

javascript
tailwind.config.js
import { skeleton } from "@skeletonlabs/skeleton/plugin";

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: [
    "./src/**/*.{html,js,ts,vue}",
    require("path").join(
      require.resolve("@code-coaching/vuetiful"),
      "../**/*.{html,js,ts,vue,mjs}"
    ),
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    skeleton(),
  ],
};
javascript
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind Directives

Make sure to have the Tailwind directives in your main css file, e.g. style.css or main.css.

css
style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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, themes } = useTheme();

onMounted(() => {
  /**
   * This adds the data-theme attribute to the <body> tag
   * And it will load the theme in the <head> tag
   */
  applyTheme(themes.vuetiful);
  /**
   * This will add the dark mode class to the html tag based on the OS preference
   */
  autoModeWatcher();
});
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.