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

Add PixelPlugin plugin to your Vue project.

// main.{ts|js}
import { createApp } from 'vue'
import { PixelPlugin } from '@mekari/pixel3'
import App from './App.vue'

const app = createApp(App)
app.use(PixelPlugin)
app.mount('#app')

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 { PixelPlugin } from '@mekari/pixel3'
import './pixel.css'
import App from './App.vue'

const app = createApp(App)
app.use(PixelPlugin)
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

Create plugin file plugins/pixel.ts or plugins/pixel.client.ts and add the following code.

// plugins/pixel.ts or plugins/pixel.client.ts
import { PixelPlugin } from '@mekari/pixel3'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PixelPlugin)
})

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>