How can I use vue3-sfc-loader with vuetify? #85
-
|
I'm hitting exactly the issue described in the closed issue #82, but that issue was closed by the author without a solution...
|
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 2 replies
-
|
(need an answer to close this entry) |
Beta Was this translation helpful? Give feedback.
-
|
The problem with Vuetify is that most bundlers do auto-import of the components. The result is that the vuetify components don't get registered globally with vue and that's why they're not found when referenced by a dynamically loaded SFC. Even if the components were globally registered, which ones would actually be available would depend on what the existing app into which an SFC component is loaded already makes use of (I'm loading components into an app as opposed to dynamically loading the full app). So what I'm inclined to do is to either figure out how to load vuetify fully and register all its components globally, or have a 'whitelist' and explicitly load those. |
Beta Was this translation helpful? Give feedback.
-
|
Did you get anywhere with this? I'm trying to do the same thing with Vuetify 3. |
Beta Was this translation helpful? Give feedback.
-
|
it's been a while... memory fades... |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. Most of that went over my head. I figured out how to get components working, guess I can just manually include them. <template>
<VBtn text="Label"></VBtn>
</template>
<script>
import Vuetify from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.min.js';
let VBtn = Vuetify.components.VBtn
export default {
components: {
VBtn
},
}
</script> |
Beta Was this translation helpful? Give feedback.
-
|
Hello tve, <!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.runtime.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
</head>
<body>
<script>
// <!--
const config = {
files: {
'/main.vue': `
<template>
<v-btn>
my button
</v-btn>
</template>
`,
}
};
// -->
const options = {
devMode: true,
moduleCache: {
vue: Vue,
},
async getFile(url) {
// for convenience, example files a loaded from strings
if ( config.files[url] )
return config.files[url];
// other files are loaded as usual, over the network
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return {
getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
}
},
addStyle(styleStr) {
const style = document.createElement('style');
style.textContent = styleStr;
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
log(type, ...args) {
console[type](...args);
},
}
const vuetify = Vuetify.createVuetify({
// ... your configuration
})
window['vue3-sfc-loader'].loadModule('/main.vue', options)
.then(rootComponent => {
const app = Vue.createApp(rootComponent)
app.use(vuetify);
app.mount(document.body);
})
.catch(ex => console.error(ex));
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
does it meet your needs? |
Beta Was this translation helpful? Give feedback.
Hello tve,
you can try this minimalist Vuetify example: