Closed Kosmostars7403 closed 3 years ago
First of all, sorry for my dumb question! What i'm doing wrong?
test.js
import DemoElement from './DemoElement.vue'; Vue.customElement('demo-basics', DemoElement);
DemoElement.vue (it is your demo)
<template> <div> <h4>{{ message }}</h4> <el-table :data="tableData"> <el-table-column prop="prop" label="Prop name"></el-table-column> <el-table-column prop="value" label="Value"></el-table-column> <el-table-column prop="type" label="typeof"></el-table-column> </el-table> </div> </template> <script> module.exports = { props: { prop1: {}, prop2: {}, prop3: {}, stringProp: { type: String }, booleanProp: { type: Boolean }, numberProp: { type: Number }, longPropName: {}, objectProp: {}, arrayProp: {} }, data() { return { message: 'Hello Vue-custom-element!' }; }, computed: { tableData() { const data = [{ prop: 'prop1', value: JSON.stringify(this.prop1), type: typeof this.prop1 }, { prop: 'prop2', value: JSON.stringify(this.prop2), type: typeof this.prop2 }, { prop: 'prop3', value: JSON.stringify(this.prop3), type: typeof this.prop3 }, { prop: 'stringProp (type: String)', value: this.stringProp, type: typeof this.stringProp }, { prop: 'booleanProp (type: Boolean)', value: this.booleanProp, type: typeof this.booleanProp }, { prop: 'numberProp (type: Number)', value: this.numberProp, type: typeof this.numberProp }, { prop: 'long-prop-name', value: JSON.stringify(this.longPropName), type: typeof this.longPropName }]; this.objectProp && data.push({ prop: 'objectProp', value: this.objectProp, type: typeof this.objectProp }); this.arrayProp && data.push({ prop: 'arrayProp', value: this.arrayProp, type: typeof this.arrayProp }); return data; } }, created() { console.log('demo-basic created()'); } }; </script>
index.html
<!doctype html> <html lang="en"> <head> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-custom-element@3.2.14/dist/vue-custom-element.min.js"></script> <script src="../static/test.js"></script> </head> <body> <demo-basics prop1="1" prop2="example text" prop3="true" string-prop="123" boolean-prop="true" number-prop="123" long-prop-name="long name"> </demo-basics> </body> </html>
I get Uncaught SyntaxError: Cannot use import statement outside a module
Uncaught SyntaxError: Cannot use import statement outside a module
if i add type="module" here
type="module"
<script type="module" src="../static/test.js"></script>
i get this error:
Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
How can i use your project without webpack and npm?
Like this - https://jsfiddle.net/nightman/obx2m9qy/
Feel free to ask questions. Regards!
First of all, sorry for my dumb question! What i'm doing wrong?
test.js
DemoElement.vue (it is your demo)
index.html
I get
Uncaught SyntaxError: Cannot use import statement outside a module
if i add
type="module"
herei get this error:
How can i use your project without webpack and npm?