How to import this in Nuxt3

[ShoWerZen]

I defined a file in plugins folder.

import PwaInstall from '@khmyznikov/pwa-install';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(PwaInstall);
});

Use this component in my install page got this error.

[nuxt] [request error] [unhandled] [500] Cannot convert object to primitive value                                                                                                           10:41:03
  at ./@khmyznikov/pwa-install:4:1773  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:312:5)  
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:156:14)  
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:204:14)  
  at async ./plugins/pwaInstall.js:3:31  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:312:5)  
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:156:14)  
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:204:14)  
  at async ./virtual:nuxt:/Users/showerzen/wap/.nuxt/plugins/server.mjs:21:32  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:312:5)

[ShoWerZen]

I change plugins file as pwa-install.client.ts

import { PWAInstallElement } from '@khmyznikov/pwa-install';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('pwa-install', PWAInstallElement);
});

No error log but component not shown.

[ShoWerZen]

Solution below:

1. plugins/pwa-install.client.ts

   
   import { PWAInstallElement } from '@khmyznikov/pwa-install';

export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.component('pwa-install', PWAInstallElement); });

2. nuxt.config.ts

vue: { compilerOptions: { isCustomElement: tag => tag === 'pwa-install' } },

[khmyznikov]

Yep. Because Nuxt is based on Vue, you need to tell Vue about new custom element

[gerardo-rodriguez]

Nice, thank you @ShoWerZen!

I'm curious, do we even need to use nuxtApp.vueApp.component in the plugin for a native custom element? As I understand, nuxtApp.vueApp.component is used to register Vue components rather than custom elements (web components). I believe it might be sufficient only to import pwa-install.

Alternatively, for me, I didn't want pwa-install installed globally, so I did the following in the only Vue component where I needed pwa-install:

<script setup lang="ts">
import type { PWAInstallElement } from '@khmyznikov/pwa-install';
import { type Ref, onMounted, ref } from 'vue';

const pwaInstallRef: Ref<PWAInstallElement | undefined> = ref(undefined);

onMounted(async () => {
  // Only load `pwa-install` script on the client (to avoid SSR errors)
  await import('@khmyznikov/pwa-install');
});
</script>

<template>
  <button @click="pwaInstallRef?.showDialog()">
    Show custom PWA install dialog
  </button>
  <pwa-install
    ref="pwaInstallRef"
    manifest-url="/manifest.webmanifest"
  ></pwa-install>
</template>