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=":300,400&display=swap" rel="stylesheet"> <!--Google Fonts-->
<script src=".js"></script> <!--W3.Css-->
<script src=".1.19/browser.js" type="text/babel"></script><!--Bable Hosting-->
<script src=".js"></script> <!--Vue Hosting-->
<script src=".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 ponent)
<template>
<app-header></app-header>
<app-footer></app-footer>
</template>
<script>
import Header from "./ponents/header.vue";
import Footer from "./ponents/footer.vue";
export default {
ponents: {
"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.
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./css?family=Montserrat:300,400&display=swap" rel="stylesheet"> <!--Google Fonts-->
<script src="https://www.w3schools./lib/w3.js"></script> <!--W3.Css-->
<script src="https://cdnjs.cloudflare./ajax/libs/babel-core/6.1.19/browser.js" type="text/babel"></script><!--Bable Hosting-->
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script> <!--Vue Hosting-->
<script src="https://unpkg./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 ponent)
<template>
<app-header></app-header>
<app-footer></app-footer>
</template>
<script>
import Header from "./ponents/header.vue";
import Footer from "./ponents/footer.vue";
export default {
ponents: {
"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.
Share Improve this question edited Mar 13, 2020 at 7:23 Yash Gaikwad asked Mar 13, 2020 at 6:57 Yash GaikwadYash Gaikwad 311 silver badge5 bronze badges 2-
1
To be able to import modules in a browser, you need to use
<script type="module" src="./my-module.js"></script>". According to the documentation, Vue Single File Components only work with build tools like Babel or Browerify. However it may be possible to use SFCs without a module builder with the help ofhttp-vue-loader: see here – thibautg Commented Mar 13, 2020 at 7:14 - 1 am a newbie to Vue.js. I don't like working with cli - learn to walk before you run. CLI is the remended way to use Vue 2. It's possible to use it without it but this requires some proficiency and you won't be able to use a lot of third-party Vue libs because they are supposed to be used with CLI. – Estus Flask Commented Mar 13, 2020 at 7:45
3 Answers
Reset to default 2.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 patible 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.
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
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 "./ponents/header.js";
import Footer from "./ponents/footer.js";
export default {
ponents: {
"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"