Replies: 2 comments
-
You can provide an instance of How do you create this client is up to you... In web component initialization code, or shared via Since web components should be kind of standalone and do not usually require extensive data fetching, maybe |
Beta Was this translation helpful? Give feedback.
0 replies
-
I did this a while ago. It required a bit of wizardry in the setup function you can pass to defineCustomElement: // ./src/my-custom-element.js
import {
createApp, defineCustomElement, h, getCurrentInstance,
} from 'vue';
import { VueQueryPlugin } from '@tanstack/vue-query';
import { i18n } from './utils/i18n';
import MyComponent from './components/MyComponent.ce.vue';
// some magic to include plugins in our custom element
const MyCustomElement = defineCustomElement({
render: () => h(MyComponent),
setup() {
const app = createApp();
app.use(VueQueryPlugin);
app.use(i18n);
const inst = getCurrentInstance();
Object.assign(inst.appContext, app._context);
Object.assign(inst.provides, app._context.provides);
},
styles: MyComponent.styles,
});
if (!customElements.get('my-custom-element')) {
customElements.define('my-custom-element', MyCustomElement);
} // ./vite.config.js
export default defineConfig({
plugins: [
vue({
customElement: true,
template: {
compilerOptions: {
// treat all tags with a dash as custom elements
isCustomElement: (tag) => tag.includes('-'),
},
},
}),
],
build: {
lib: {
entry: fileURLToPath(new URL('./src/my-custom-element.js', import.meta.url)),
name: '???',
fileName: (format) => `index.${format}.js`,
},
},
}) |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi everyone! Is there a way to use vue-query in Web components created using Vue's
defineCustomElement
? I'm building a Web components library and it looks like the plugin needs to be registered at the application level, but in this case, I just want to export some web components instead, so not sure how to achieve this...After migrating them to Web Components, I get the typical error you get if you don't initialize the library:
runtime-core.esm-bundler.js:221 Uncaught Error: No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.
Beta Was this translation helpful? Give feedback.
All reactions