@prestashopcorp/puik-components

Puik Components

The PrestaShop UI Kit Vue Components

Documentation

About The Project

Puik Components is a Vue Components library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem.

ℹ️ see list of available Vue components

Prerequisites

• Node.js LTS is required.
• Vue 3

Installation

# NPM
$ npm install @prestashopcorp/puik-components @prestashopcorp/puik-theme --save

# Yarn
$ yarn add @prestashopcorp/puik-components @prestashopcorp/puik-theme

# pnpm
$ pnpm install @prestashopcorp/puik-components @prestashopcorp/puik-theme

Style

import css in your application:

@import "@prestashopcorp/puik-theme/index.css";

Auto import using Puik Resolver (recommended)

First you need to install unplugin-vue-components, unplugin-auto-import and the Puik resolver @prestashopcorp/puik-resolver

$ npm install -D unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver

# Yarn
$ yarn add unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D

# pnpm
$ pnpm install unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D

Then add the code below in your vite.config file

ℹ️ if you don't use Vite follow this link

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { PuikResolver } from '@prestashopcorp/puik-resolver'

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [PuikResolver()],
    }),
    AutoImport({
      resolvers: [PuikResolver()],
    }),
  ],
})

On demand import

Import the vue component directly into your vue file

<script setup>
import { PuikButton } from '@prestashopcorp/puik-components'
</script>

<template>
  <puik-button>Example button</puik-button>
</template>