How to work with CDN script only in Vue... unable to import component?

user_10641158 0
Viewed 5725

I am a newbie to Vue.js. I don't like working with cli, so I am using CDN for everything but stuck in some unknown problem. I googled many thing but couldn't understand what going on. Any help would be really appreciated.

Here is my index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="8-utf" />
        <meta name="author" content="Yash Gaikwad">
        <meta name="description" content="">
        <meta name="keyword" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <link rel="stylesheet" href="style.css"> <!--Stylesheet-->


        <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet"> <!--Google Fonts-->
        <script src="https://www.w3schools.com/lib/w3.js"></script> <!--W3.Css-->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js" type="text/babel"></script><!--Bable Hosting-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--Vue Hosting-->

        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!--Vue Router-->

    </head>
    <body>

        <div id="app">

        </div>

        <script src="script.js"></script> <!--Javascript-->
    </body>
</html>

Here is my script.js

import app from "./main.vue"

new Vue({
    el: "#app",
    data: {

    },
    methods: {

    },
    render: h => h(app)
});

This is my main.vue (root component)

<template>
    <app-header></app-header>
    <app-footer></app-footer>
</template>

<script>
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";

export default {
    components: {
        "app-header": Header,
        "app-footer": Footer
    }

}
</script>

<style scoped>

</style>

Seems to me that importing main.vue is causing error. And something is going wrong there.

This are the errors I being getting from both ff and chrome

Uncaught SyntaxError: Cannot use import statement outside a module

SyntaxError: import declarations may only appear at top level of a module

Thankyou every much guys.

vue-router vuejs2 vue-component vue.js javascript
3 Answers

.vue is not a file type that a browser understands. If you want to build VueJS applications without using any CLI tools you'll have to learn about ES6 Modules and understand that your application won't be supported by all browsers.

CLI tools like Webpack transforms your JavaScript and Vue code into JavaScript code that is compatible with more browsers, minifies your code (makes the size of the files that are downloaded smaller), etc. It also makes it much easier for you to use third-party packages in your code, as well as to keep them updated.

Using a CLI tool like Webpack or VueCLI for Vue apps will make your life much easier in the long run and is the standard way of doing things across the industry.

user_34866750

Always import statement should be at the top of the file, you are using template and then the import in main.vue put script block to the top and then the template

user_55977750

The browser cannot understand .vue extension while using vue CDN so replace that with .js or load vue via CLI instead.

Next inside the JS (vue) files, remove the template, style and script tag and make it look like this:

//header.js
export default {
   data: () => ({
   }),

   template:`<h1>Header</h1>`
}

//footer.js
export default {
   data: () => ({
   }),

   template:`<h1>Footer</h1>`
}

Next, add a type module to your script tag like:

<script type="module">
import Header from "./components/header.js";
import Footer from "./components/footer.js";

export default {
    components: {
        "app-header": Header,
        "app-footer": Footer
    }

}
</script>

You can also replace ES6 import statement with ES5 require if you don't want to use type="module"

user_103677810
Related