Getting Started With PUIK

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 the whole PrestaShop ecosystem.

Using the Vue.js Components

Prerequisites

  • Node.js LTS is required.

Installation

This package is public. You can use it in all PrestaShop projects.

# Choose your favorite package manager
# NPM
$ npm install @prestashopcorp/puik --save

# Yarn
$ yarn add @prestashopcorp/puik

# pnpm
$ pnpm install @prestashopcorp/puik

(back to top)

Usage

  1. Install unplugin-vue-components.
$ npm install -D unplugin-vue-components

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

# pnpm
$ pnpm install unplugin-vue-components -D
  1. Add the code below to your vite.config file.
 1import { defineConfig } from "vite";
 2import Components from "unplugin-vue-components/vite";
 3import { PuikResolver } from "@prestashopcorp/puik";
 4
 5export default defineConfig({
 6  plugins: [
 7    // ...
 8    Components({
 9      resolvers: [PuikResolver()],
10    }),
11  ],
12});

On Demand Import

Import the Vue.js component and the CSS component directly into your Vue.js file.

1<script setup>
2import "@prestashopcorp/puik/es/components/button/style/css";
3import { PuikButton } from "@prestashopcorp/puik";
4</script>
5
6<template>
7  <puik-button>Example button</puik-button>
8</template>

(back to top)

Full Import

If the bundle size doesn’t matter to you, you can import the library fully. To do so, import the Vue.js library and the CSS directly into your main.js/main.ts.

1import { createApp } from "vue";
2import Puik from "@prestashopcorp/puik";
3import "@prestashopcorp/puik/dist/index.css";
4import App from "./App.vue";
5
6const app = createApp(App);
7
8app.use(Puik);
9app.mount("#app");

(back to top)

Using the CSS Components

If you don’t use Vue.js for your application, you can use the CSS-only version of our components. It includes all the styles used in the Vue.js component library.

Usage

  1. Include the CSS in your HTML by using the CDN.
<!-- Lastest version  -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@prestashopcorp/puik/dist/index.css"
/>

<!-- Specific version (recommended)  -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@prestashopcorp/[email protected]/dist/index.css"
/>
  1. Add the classes to your HTML.
  <button class="puik-button">Example button</button>

(back to top)

Troubleshooting →