Previewbox Docs

Appearance

Nuxt ​

Learn how to install our components in your Nuxt project.

Load script in Config ​

To add the script to your Nuxt config, include the following in your nuxt.config.js:

javascript
app: {
    baseURL: basePath,
    head: {
      script: [
        {
          src: 'https://cdn.jsdelivr.net/npm/@mariusbongarts/previewbox/dist/link/index.min.js',
        },
      ],
    },
  },

Enable Custom Elements ​

To use our components in your Nuxt project, you need to enable custom elements. You can do this by adding the following to your nuxt.config.js:

javascript
vue: {
  compilerOptions: {
    isCustomElement: (tag: any) =>
      tag.startsWith('previewbox-'),
  },
},

This will tell the Vue compiler to treat our components as custom elements. If you want to learn more about Custom Elements and Web Components, check out this detailed article series.

Use in Templates ​

Our components are built with Web Components and are not compatible with server-side rendering (SSR). To use our components in your Nuxt templates, you can use the ClientOnly component.

html
<ClientOnly>
  <previewbox-link href="https://web-highlights.com/about"></previewbox-link>
</ClientOnly>