PIE Web Components ‐ Nuxt 3

Step 1: Installing Lit

First, install lit(at the time of writing this guide, the version of Lit we use is 3.1.2) and nuxt-ssr-lit into your application. These are used to get the web components working.

To install Lit, simply run:

yarn add [email protected]
yarn add nuxt-ssr-lit

Or

npm install [email protected]
npm install nuxt-ssr-lit

Step 2: Installing and integrating @justeattakeaway/pie-css

Then, install our CSS library pie-css, we use this library to house some base application styles our Web Components require to look correct.

yarn add @justeattakeaway/pie-css

Or

npm install @justeattakeaway/pie-css

Step 3: Installing a PIE Web Component

We need to install @justeattakeaway/pie-webc package using:

yarn add @justeattakeaway/pie-webc

Or

npm install @justeattakeaway/pie-webc

Step 4: Configurations for nuxt.config.ts file

To get our components working, ensure you are applying the following rules to your nuxt.config.ts file:

export default defineNuxtConfig({
  ssr: true,
  modules: [
      ['nuxt-ssr-lit', { litElementPrefix: ['pie-', 'icon-'] }]
  ],
  imports: {
      transform: {
          exclude: [/\bpie-\b/, /\bicon-\b/],
      },
  },
  css: ['@justeattakeaway/pie-css'],
});

This ensures that Nuxt/Vue recognise the pie components and our icons as custom elements and not Vue components. Our component selectors start with pie- and our icons start with icon-. It also adds our base CSS to the project, which styles the web components.

In your components, you should be able to render components like so:

<script setup>
import { PieButton } from '@justeattakeaway/pie-webc/components/button.js';
import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
</script>

<template>
  <div>
    <pie-button>
      <icon-close></icon-close>
      hello, world
    </pie-button>
  </div>
</template>