Getting Started

Vuetiful is a Proof of Concept component library for Vite based Vue3 applications. It is based on the design tokens of Skeleton, it leverages TailwindCSS and HeadlessUI.

It provides overwrites for a large set of Quasar components.

Vuetiful can be used standalone in any Vue3 project or it can be coupled into other frameworks like Quasar.

Install Vuetiful

console
npm install @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 postcss autoprefixer prettier-plugin-tailwindcss

Initialize Tailwind

console
npx tailwindcss init

tailwind.config.js

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{html,js,ts,vue}',
    require('path').join(
      require.resolve('@code-coaching/vuetiful'),
      '../**/*.{html,js,ts,vue}'
    ),
  ],
  theme: {
    extend: {},
  },
  plugins: [...require('@code-coaching/vuetiful/tailwind/vuetiful.cjs')()],
};

Tailwind Directives

Make sure to not have the Tailwind directives in your css, this is provided by Vuetiful.

css
// If any of these are in your css, remove them
@tailwind base;
@tailwind components;
@tailwind utilities;

pnpm | yarn

In case you are using pnpm or yarn instead of npm, you will need to create/add the following to prettier.config.js.

javascript
// prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
};

Recommended VSCode Extension

Tailwind CSS IntelliSense

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

PostCSS config

Create a postcss.config.cjs file in the root of your project, add the following content:

javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

main.ts

typescript
import { createApp } from 'vue';

import '@code-coaching/vuetiful/styles/all.css';
/**
 * Uncomment the theme you want to use
 */
import '@code-coaching/vuetiful/themes/theme-vuetiful.css';
// import '@code-coaching/vuetiful/themes/theme-rocket.css';
// import '@code-coaching/vuetiful/themes/theme-sahara.css';
// import '@code-coaching/vuetiful/themes/theme-seafoam.css';
// import '@code-coaching/vuetiful/themes/theme-seasonal.css';
// import '@code-coaching/vuetiful/themes/theme-skeleton.css';
import './style.css';

import App from './App.vue';

createApp(App).mount('#app');

App.vue

typescript
import { useDarkMode, useTheme } from "@code-coaching/vuetiful";
import { onMounted } from "vue";

const { autoModeWatcher } = useDarkMode();
const { changeDataTheme } = useTheme();

onMounted(() => {
  changeDataTheme("vuetiful"); // adds data-theme="vuetiful" to the <body> tag
  autoModeWatcher(); // automatically use the dark preference of the OS
});