PIE Web Components ‐ Vue2 Nuxt 2 Next 10 Integration

Migrating Web Components to Lit 3

As of the following npm versions, our components use Lit 3:

• pie-button 0.39.1 | Changelog | npm
• pie-switch 0.18.0 | Changelog | npm
• pie-card 0.14.2 | Changelog | npm
• pie-cookie-banner 0.11.4 | Changelog | npm
• pie-divider 0.9.2 | Changelog | npm
• pie-form-label 0.8.2 | Changelog | npm
• pie-icon-button to 0.21.3 | Changelog | npm
• pie-link 0.11.2 | Changelog | npm
• pie-modal 0.33.1 | Changelog | npm
• pie-notification 0.1.2 | Changelog | npm
• pie-spinner 0.2.2 | Changelog | npm
• pie-webc-core 0.12.0 | Changelog | npm
• pie-icons 4.9.3 | Changelog | npm
• pie-icons-react 4.12.0 | Changelog | npm
• pie-icons-vue 4.11.1 | Changelog | npm
• pie-wrapper-react 0.11.0 | Changelog | npm
• pie-icons-configs 4.5.1 | Changelog | npm

Most application shouldn't require any refactoring, however, in the event your application is using Webpack 4 (such as Nuxt 2 / Next 10), you will have to make a number of changes to your nuxt / next config, and add the following additional babel devDependencies:

yarn add --dev babel-loader@8 \
    @babel/plugin-transform-optional-chaining \
    @babel/plugin-transform-nullish-coalescing-operator \
    @babel/plugin-transform-logical-assignment-operators

A Lit 3 with Webpack 4 migration guide can be found here.

Be sure to take a look at our Next 10 / Nuxt 2 configs if you need any further guidance!

React / NextJS Consumers

For React consumers, including NextJS, you will have to list @lit/react as a dependency in your project as seen here. this step might change in the near future to be part of our core package.