[Question] Problems with import "*.vue" files.

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

if i add type="module" here

<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?

karol-f / vue-custom-element

[Question] Problems with import "*.vue" files. #226