The Swiper Vue implementation is likely to be removed in future versions and the documentation recommends switching to the Web Component version of Swiper.
Custom elements need to be defined in the compiler config and I’m having a hard time figuring out how to do this with Bud (6.23.3).
I tried the config snippet below:
app.vue.set('compilerOptions', {
isCustomElement: (tag) => tag.startsWith('swiper'),
})
But I still get warnings on the console about Vue failing to resolve the component:
Failed to resolve component: swiper-container
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Full bud.config.mjs:
/**
* Compiler configuration
*
* @see {@link https://roots.io/docs/sage sage documentation}
* @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
*
* @type {import('@roots/bud').Config}
*/
export default async (app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/docs/bud.entry}
* @see {@link https://bud.js.org/docs/bud.assets}
*/
app
.entry('app', ['@scripts/app', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.define({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
});
/**
* Set public path
*
* @see {@link https://bud.js.org/docs/bud.setPublicPath}
*/
app.setPublicPath('/wp-content/themes/example/public/');
/**
* Disable runtimeOnly for Vue
*
* @see {@link https://bud.js.org/extensions/bud-vue#disabling-runtime-only}
*/
app.vue.set('runtimeOnly', false)
/**
* Development server settings
*
* @see {@link https://bud.js.org/docs/bud.setUrl}
* @see {@link https://bud.js.org/docs/bud.setProxyUrl}
* @see {@link https://bud.js.org/docs/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('http://example.test')
.watch(['resources/views', 'app']);
app.vue.set('compilerOptions', {
isCustomElement: (tag) => tag.startsWith('swiper'),
})
};