Can someone explain the WHY of how Import Vue from 'vue' breaks the rendering of the template? I've seen other answers on how to work around this, but none of them have gone into the details of why it breaks.
I ran npm init and npm install vue, not using the CLI.
I created an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<first-task></first-task>
{{msg}}
</div>
<script src="app.js"></script>
</body>
</html>
and an app.js looking like:
import Vue from 'vue/dist/vue.js'; //Remove to fix
Vue.component('first-task', {
template: '<p>Hello World!</p>'
});
var app = new Vue({
el: '#app',
data: {
msg: "Hello World"
}
});
Removing the import, it renders fine, but it's unclear to me why this happens. My only guesses are that the default new Vue doesn't reference the full build, or that the implicit Render() doesn't get called, but I'm unsure of how to look into this more.
import statements may only appear in a javascript module
<script type="module" src="app.js"></script>
Should fix it, though you would not need to import Vue with your current code anyway, as you have seen
Related
I am using vuejs to make a simple page. Although I can make similar page without any framework, I wanted to try vuejs and now it it almost production ready.
Thing is it is simply single js and html file and it throws following warning.
You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
Let's say I want to keep things this way, how do I remove this warning and get single page html and js file?
// main.js
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script src="main.js"></script>
</body>
</html>
- index.html
- assets
-- js
--- main.js
-- css
--- styles.css
As suggested by #IVO GELOV, and mentioned in guide here, it is working for me now.
Use below url for production use and to remove the warning.
https://unpkg.com/vue#3/dist/vue.global.prod.js
I want to use axios in my simple project but it doesn't work but when I use CDN for axios it works..!!
HERE'S THE MY CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./app.js"></script>
</body>
</html>
APP.JS
import { axios } from ("axios");
const getData = async () => {
const data = await axios.get("https://swquotes.herokuapp.com/random");
console.log(data);
};
window.onload = getData();
I want to know ho can i use npm packages directly in my project without react
If you have access to node_modules then you can import it directly from the folder, even though thats dirty and is not recommended.
<script src="node_modules/<your_package>/dist/<entry_file>"></script>
Your problem is a little different, just to narrow it a little down - the browser doesnt understand your import statement as it has to be transpiled with webpack.
import { axios } from ("axios");
So unless you import directly from CDN or use our dirty shown way of importing it - it wont and should not work
I was trying to replicate this question with a MCVE, but I was not able to use the Composition API in a <script> tag in index.html.
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 script</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
<script type="module">
const app = Vue.createApp({
el: "#app",
setup() {
console.log("foo")
}
})
</script>
</body>
</html>
The console only outputs this:
You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
GET http://127.0.0.1:5500/favicon.ico [HTTP/1.1 404 Not Found 0ms]
Call .mount(elementId) at the end to make it work
const app = Vue.createApp({
setup() {
console.log("foo")
}
})
app.mount("#app")
I am using JavaScipt ES6 with Node. I am using visual studio code. I am getting this error when I run npm start:
The error is:
× C:\Users\markp\source\repos\bioinvisionTest\index.html:1:31: Imports and requires are not supported inside inline <script> tags yet
in other programs the import works. This one it doesn't. All that is in the program is this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script>
import TestComponent from "./components/Testcomponent"
</script>
</body>
</html>
and in the components folder there is file called Testcomponent js that contains this:
function TestComponent() {
console.log("test component js")
}
export default {
TestComponent
}
return key is somting which you can't simply ignore if it's multiline codes.
If you are uinsg Creaet-react-app as generator then i will recommend use APP.js as base and inject your component in that file for now. Later you can redesign .
If you are using only HTML and JS file then you should import react and react-dom library in your index.html file .
One page React App , place in your html file.
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (<p>Hello world</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
Modules are natively suppported
refer MDN docs
Try adding type="module" to your script tag.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script type="module">
import TestComponent from "./components/Testcomponent"
</script>
</body>
</html>
I created a sample Vue application via #vue/cli 3.0:
vue create testapp
cd testapp
npm run serve
As part of mounted(), I wanted to fetch some local data:
fetch("users.json")
.then(r => r.json())
.then(r => this.users = r.hits.hits.map(x => x._source))
where users is defined in data().
The response is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>example.com</title>
<link href="/about.js" rel="prefetch"><link href="/app.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but example.com doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
I tried to move the JSON file to static in the root of the application (at the same level as src, then in assets and then everywhere I could think of - the answer is always the one from the app which assumes that this is a request for HTML/JS/CSS content, and not raw data.
Where should such a static file be placed?
You may assign the JSON into your data at the beginning, try this in your App.vue
<template>
<div>
<div v-for="user in users">{{user}}</div>
</div>
</template>
<script>
import json from './users.json'
export default{
data(){
return{
users: json
}
}
}
</script>
And also make sure your main.js has import App.vue
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Locate your users.json at the same level as src(which is same with App.vue) is fine.
Hope this may help you! Cheers