Web Components

[deleonio]

How we can use web components in slices?

https://github.com/slidevjs/slidev/issues/233

[deleonio]

https://www.digitalocean.com/community/tutorials/vuejs-vue-integrate-web-components

[deleonio]

const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'plastic-button'

[deleonio]

I tried

• https://sli.dev/custom/config-vue.html

// ./setup/main.ts
import { defineAppSetup } from '@slidev/types';

export default defineAppSetup(({ app }) => {
  console.log(app);
  app.config.isCustomElement = (tag) => {
    console.log('isCustomElement', tag);
    return tag === 'kol-counter';
  };
});

• https://sli.dev/custom/config-vite.html

  
  // windi.config.ts
  import vue from '@vitejs/plugin-vue';

export default { plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => { console.log('isCustomElement', tag); return tag === 'kol-counter'; }, }, }, }), ], };

[deleonio]

It works

But unfortunately I can't get rid of the console error.