-
|
Hello, first I want to thank you for the library doing a great job for me. My question is how to import 3rd part library. My index.php file. <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="vue.global.prod.js"></script>
<script src="modal.js"></script>
<script src="vue3-sfc-loader.js"></script>
<title>Vue example</title>
</head>
<body>
<div id="app"></div>
<script>
const options = {
moduleCache: {
vue: Vue,
},
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return await res.text();
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'container-resource': Vue.defineAsyncComponent( () => loadModule('/ContainerResource.vue', options) ),
},
template: '<container-resource></container-resource>'
});
app.use(window["vue-js-modal"].default)
app.mount('#app');
</script>
</body>
</html>When I run the code in the browser there is the following error Uncaught TypeError: Cannot read property '$modal' of undefined
at Object.install (modal.js:1)
at Object.use (vue.global.prod.js:1)
at (index):44 |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 2 replies
-
|
Hi, |
Beta Was this translation helpful? Give feedback.
-
|
It`s not work. I've already tried this. After tried again, this is my component where I want to use vue-js-modal. <template>
<modal name="my-first-modal">
This is modal
</modal>
<form @submit.prevent>
<div class="label_container">
<label for="title">Title</label>
<input type="text" id="title" v-model="title">
</div>
<div class="label_container">
<label for="text">Text</label>
<textarea id="text" v-model="text"></textarea>
</div>
<div class="label_container">
<label for="link">Link</label>
<input type="text" id="link" v-model="link">
</div>
<button class="submit_btn" @click="addResource">Add Resource</button>
</form>
</template>
<script>
import VModal from './modal.js'
export default {
data() {
return {
title: '',
text: '',
link: ''
}
},
components: {
modal: VModal
},
methods: {
addResource() {
this.$modal.show('my-first-modal')
this.$emit('add-resource', this.title, this.text, this.link)
},
},
}
</script>
<style>
.label_container {
width: 90%;
}
.label_container label {
display: block;
font-weight: bold;
font-size: 1.3em;
margin: 0.4em auto;
}
input, textarea {
width: 100%;
}
textarea {
height: 70px;
}
.submit_btn {
color: white;
background-color: #370a5a;
border: none;
cursor: pointer;
font-size: 1em;
padding: 0.8em;
margin-top: 1em;
}
.submit_btn:hover {
color: #ffffff;
background-color: #6f0cb8;
}
</style>Error received TypeError: Cannot read property 'show' of undefined
at Proxy.addResource (eval at C (vue3-sfc-loader.js:86), <anonymous>:28:19)
at onClick._cache.<computed>._cache.<computed> (eval at C (vue3-sfc-loader.js:86), <anonymous>:61:86)
at St (vue.global.prod.js:1)
at Ct (vue.global.prod.js:1)
at HTMLButtonElement.n (vue.global.prod.js:1) |
Beta Was this translation helpful? Give feedback.
-
|
If |
Beta Was this translation helpful? Give feedback.
-
|
Could you give a working example of how to add 3rd part library? |
Beta Was this translation helpful? Give feedback.
-
|
Try to use the following example : https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md#vue2-basic-example note that vue-js-modal is intended to work with Vue2 but |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for example! So I am PHP dev and I have a little experience with VUE. I will give you examples with libraries which I need in my job. Modal lib https://v3.vue-final-modal.org <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<script src="./vue.global.prod.js"></script>
<script src="./vue3-sfc-loader.js"></script>
<script src="./node_modules/vue-final-modal/dist/VueFinalModal.umd.js"></script>
<script src="./node_modules/@vueform/multiselect/dist/multiselect.global.js"></script>
<link rel="stylesheet" href="./node_modules/@vueform/multiselect/themes/default.css">
<title>Vue example</title>
</head>
<body>
<div id="app"></div>
<script>
const options = {
moduleCache: {
vue: Vue,
},
async getFile(url) {
const res = await fetch(url);
if (!res.ok)
throw Object.assign(new Error(url + " " + res.statusText), { res });
let content = await res.text();
content = url.endsWith("modal.mjs")
? { content: content, type: ".mjs" } // `type` since v0.7.0 and `extname` before
: content;
return content;
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'container-resource': Vue.defineAsyncComponent( () => loadModule('/ContainerResource.vue', options) ),
},
template: '<container-resource></container-resource>'
});
app.use(VueFinalModal())
app.component('Multiselect', VueformMultiselect)
app.mount('#app');
</script>
</body>
</html>It is very important that the library maintains |
Beta Was this translation helpful? Give feedback.
Thank you very much for example! So I am PHP dev and I have a little experience with VUE. I will give you examples with libraries which I need in my job.
Modal lib https://v3.vue-final-modal.org
Multiselect lib https://github.com/vueform/multiselect