[Vuejs]-Cannot use import statement outside a module in Vuejs. Template Django

by

3👍

✅

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh;">
        <el-header>
            <el-row>
                <el-col :span="12" style="text-align: left;">
                    <el-image
                        style="width: 110px;"
                        src="img/logo-royal.png"
                        fit="fit">
                    </el-image>
                </el-col>
                <el-col :span="12" style="float: right;">
                    <menu-header></menu-header>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-container>
                <el-main>
                    .....
content
.....
                </el-main>
            </el-container>
        </el-container>
        <el-footer style="font-size: 11px;">info</el-footer>
        </el-container>
    </div>
</body>

<script src="js/lib/vue.js"></script>
<script src="js/lib/apexcharts.js"></script>
<script src="js/lib/vue3-apexcharts.js"></script>

<script type="module">
import VueApexCharts from './vue-apexcharts'
var app = new Vue({
    el: '#appl',
    components:{
      apexchart: VueApexCharts

    },
    data() {
        return {
          
    }
    },
    methods: {

    }
});
</script>
</html>

Absence of type="module" causes this problem usually.

You can give it a try.

<script type="module">
   // your code
</script>
👤Zain Ul Abideen

Leave a comment