PIE Web Components ‐ Nuxt 2 Next 10 Vue 2 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.

Vue 2

For Vue 2 consumers, you'll need to ensure the newly installed plugins are registered within your vue.config.js like so:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(mjs|js|jsx)$/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [
                '@babel/plugin-transform-logical-assignment-operators',
                '@babel/plugin-transform-nullish-coalescing-operator',
                '@babel/plugin-transform-optional-chaining',
              ]
            }
          }
        }
      ]
    }
  }
}