Getting Started

A quick tutorial to get you up and running project with Pixel Vue 3.

Prequisite

• Vue 3.x (Pixel Vue 3 recommended for Vue 3.4 or higher)
• PostCSS (Pixel Vue 3 uses a set of PostCSS plugins to convert the parsed data to atomic css at build time)

Vue 3 + Vite

Install Pixel Vue 3

When you already have Vue 3 + Vite project, next you can install the library.

npm install @mekari/pixel3 @mekari/pixel3-postcss

Configure PostCSS

Create postcss.config.cjs file, or wherever PostCSS is configured in your project.

module.exports = {
  plugins: {
    "@mekari/pixel3-postcss": {
      include: [
        "./src/**/*.{js,jsx,ts,tsx,vue}" // path where you develop components or pages
      ],
    },
  },
}

Configure entry for CSS

Create pixel.css file, or any CSS file which is going to be the root css of your project.

@layer pixel_reset, pixel_base, pixel_tokens, pixel_recipes, pixel_utilities;

Don't forget to include CSS file in your apps

import { createApp } from 'vue'
import './pixel.css'
import App from './App.vue'

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

Add Directive

Register Pixel directive to your project, follow this guide

Start using Pixel Vue 3

Use components from @mekari/pixel3 package in your code and Pixel will extract them to the generated CSS file.

<template>
  <MpFlex direction="column" gap="4" p="12">
    <MpText size="h1">Hello Pixel Vue 3</MpText>
    <MpButton>Start to Develop</MpButton>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpFlex, MpText, MpButton } from "@mekari/pixel3"
</script>

Nuxt 3

Install Pixel Vue 3

When you already have Nuxt 3 project, next you can install the library.

npm install @mekari/pixel3 @mekari/pixel3-postcss

Configure entry for CSS

Create pixel.css file, or any CSS file which is going to be the root css of your project.

@layer pixel_reset, pixel_base, pixel_tokens, pixel_recipes, pixel_utilities;

Configure Nuxt

Add the following configuration to the nuxt.config.ts file

export default defineNuxtConfig({
  css: [
    '@/assets/css/pixel.css', // make sure to load pixel.css file at the very last
  ],
  postcss: {
    plugins: {
      "@mekari/pixel3-postcss": {
        include: [
          "./pages/**/*.{js,jsx,ts,tsx,vue}", // path where you develop pages
          "./components/**/*.{js,jsx,ts,tsx,vue}" // path where you develop components
        ],
      },
    },
  },
})

Add Directive

Register Pixel directive to your project, follow this guide

Start using Pixel Vue 3

Use components from @mekari/pixel3 package in your code and Pixel will extract them to the generated CSS file.

<template>
  <MpFlex direction="column" gap="4" p="12">
    <MpText size="h1">Hello Pixel Vue 3</MpText>
    <MpButton>Start to Develop</MpButton>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpFlex, MpText, MpButton } from "@mekari/pixel3"
</script>