Getting Started

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

Prequisite

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

Vue 3 + Vite

Install Pixel 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.

import { createApp } from 'vue'
import App from './App.vue'
import { PixelPlugin, type PixelPluginConfig } from '@mekari/pixel3'

const app = createApp(App)

app.use(PixelPlugin, {
  pixelTheme: true
} as PixelPluginConfig)

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

import './pixel.css'

const app = createApp(App)

app.use(PixelPlugin, {
  pixelTheme: true
} as PixelPluginConfig)

app.mount('#app')

Add Directive

Register Pixel directive to your project, follow this guide

Start using Pixel 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 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 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.

import { PixelPlugin, type PixelPluginConfig } from '@mekari/pixel3'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PixelPlugin, {
  pixelTheme: true // To enable pixel theme watcher.
} as PixelPluginConfig)
})

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 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 3</MpText>
    <MpButton>Start to Develop</MpButton>
  </MpFlex>
</template>

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

Nuxt 4

Create Nuxt 4 Project

npm create nuxt@latest <project-name>
cd <project-name>
npm run dev

When you had Nuxt 4 project, next you can install the library.

Install Pixel 3

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

Update Nuxt Config

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

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  modules: ["@mekari/pixel3-nuxt"],
});

Read more about Nuxt Module

Start using Pixel 3

Components from @mekari/pixel3 will auto-imported when use nuxt-module

<template>
  <MpFlex
    justifyContent="space-between"
    alignItems="center"
    p="sm"
    m="lg"
    rounded="xl"
    shadow="xl"
    background="background.brand"
    borderColor="border.default"
    borderWidth="1px"
  >
    <MpText size="h1">Hello Pixel 3</MpText>
    <MpButton v-tooltip="'Start to Develop'" @click="handleShow"> Start to Develop </MpButton>
  </MpFlex>
</template>

<script setup lang="ts">
  import { toast, usePixelTheme } from '@mekari/pixel3'

  const { setNextTheme, setDarkMode } = usePixelTheme()

  // Call these once in your root app.vue or a global plugin, not in every component
  setNextTheme(true) // Enable Design Token 2.4
  setDarkMode(false) // Enable Dark Mode

  function handleShow() {
    toast.notify({
      position: 'top-center',
      variant: 'success',
      title: 'Click is successful.'
    })
  }
</script>

Read more about Pixel Theme