Skip to content

PrestaShopCorp/puik

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

Puik

The PrestaShop UI Kit

Documentation

About The Project

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

🚧 Please note there are significant changes from version 1 to version 2. For more informations, please refer to the release-notes-v2

(back to top)

About the repository

This monorepo contains the following libraries:

Installation

ℹ️ This README only covers the Vue components library usage if you need more information about the usage of the other packages please refer to their README

Prerequisites

  • Node.js LTS is required.
  • Vue 3

Vue components only

# @prestashopcorp/puik-resolver is optional but strongly recommended
# NPM
$ npm install @prestashopcorp/puik-components @prestashopcorp/puik-resolver --save

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

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

(back to top)

Usage

Auto import (recommended)

First you need to install unplugin-vue-components & unplugin-auto-import

$ npm install -D unplugin-vue-components unplugin-auto-import

# Yarn
$ yarn add unplugin-vue-components unplugin-auto-import -D

# pnpm
$ pnpm install unplugin-vue-components unplugin-auto-import -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()],
    }),
  ],
});

ℹ️ If you are using the puik global package you can import PuikResolver directly from @prestashopcorp/puik

On demand import

Import the vue component and the component css directly into your vue file

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

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

(back to top)

Contributing

Please make sure to read the Contributing Guide before making a pull request

(back to top)