I have a very simple component in my Vue.js app.
App.vue:
<template>
<div>
App Component
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now, I try to import this component from file and render it.
index.html:
<html>
<head>
<meta charset="UTF-8" />
<title>Vue Js Demo</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>
script.js
import App from "./App.vue"
Vue.component("App", App);
var app = new Vue({
render: h => h(App)
}).$mount("#app");
However, I am not able to use this component. When I open the index.html file in my browser, I can not see my div from component as expected, but only my #app div. What am I doing wrong here?
I am using the latest vue.js and my browser is the latest Firefox.
Related
I'm trying to make a component render as per an example I found online.
I created a sample project and it works fine there, but it crashes when I'm trying to use the same thing on the official code base.
here is the contents of the blade file which is rendered.
<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>Vue SPA Demo</title>
</head>
<body>
<div id="app">
asdfsadfsadsdf
<example-component></example-component>
</div>
<script src="js/app.js"></script>
</body>
</html>
then, here is app.js
window.Vue = require("vue").default;
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
and here is ExampleComponent.vue
<template>
<div>
<div>Example Component</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
here is what the page looks like:
and here is the error:
Fun fact: when I try to include the component like this instead, it displays "Test" as expected
Vue.component('example-component', {
template: '<div>Test</div>'
});
so it is clear to me that this line/file is the issue
import ExampleComponent from './components/ExampleComponent.vue';
I found the answer!! After almost 8 hours...
Turns out the "vue-loader" 16.1.2 from package.json was the mistake. I tried the exact same configuration but changed "16.1.2" to "15.9.2" and vice-versa 4-5 times and running
rm -rf node_modules/
rm package-lock.json
npm cache clear --force
npm install
in-between every package change.
Fun fact: after that, your component will render when you write
const app = new Vue({
el: '#app',
});
in your app.js
I'm using a CDN for VUEjs because I don't want to use webpack or render from the server.
index.html and test-component.vue are in the same folder
my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VUE</title>
<!-- vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
</head>
<body>
<div id="app">
<!--HERE I WANT TO USE MY COMPONENT-->
<comp></comp>
</div>
<script>
//TRIED TO IMPORT MY COMPONENT
import comp from './test-component.vue';
const app = new Vue({
el: '#app',
});
</script>
</body>
</html>
my test-component.vue file:
<template>
<h1>im a component</h1>
</template>
<script>
console.log('testing component');
</script>
obviously .vue files are not natively supported by the browser
there are 2 possible solutions:
use a javascript bundler (like webpack or parcel)
use http-vue-loader
I have been learning VueJs through single file application at the first start.
It would consist in a single html page containing my javascript & CSS style within.
In order not to import the VueJs features from the web I have downloaded the Vue.JS file and linked it into the HTML file by inputing:
<head>
...
<script src="vue.js"
...
</head>
By doing this I was able to add a <script>...</script> into my HTML file, that consists in the JS code that would recognize Vue.
It worked just fine.
Now I want to split the code into their respective files:
HTML file
JS file
CSS file
Now I am confused to what should I import at the <head> section of my HTML file, as I need to import my file.js that contains my code + I will want to have my Vue.js file running so I don't need to import vue.js from the web.
What should I do?
I have tried the following but it did not work:
<head>
<title>First Vue playground</title>
<link rel="stylesheet" href="style.css">
<!-- Below is my JS code-->
<script src="appJS.js"></script>
<!-- below is my vue.js file so it runs Vue locally instead of importing it-->
<scrip src="vue.js"></scrip>
</head>
It's a basic question as it is my first time doing this.
Thanks to all in advance.
If you intend to use Vue in the file appJS.js, you will need to first import the vue.js before your file. here is how your files should look like :
App.js
window.onload = function () {
var app = new Vue({
el: '#app',
data: {
message: 'hello vue'
}
});
}
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="./scripts/vue.js"></script>
<script src="./scripts/app.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>{{ message }}</p>
</div>
</body>
</html>
I'm trying to render react components from an html page. I referenced the question React - component in seperate script does not work and loaded the html file from a URL like http://localhost/index.html.
My index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://...fb.me/react-0.13.3.js"></script>
<script src="https://...fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx" src="index.js"></script>
</body>
</html>
My index.js:
ReactDOM.render(<MainPage />, document.getElementById('example'))
The error is that MainPage is not defined. But when I write
include MainPage
There is an error on the include statement. Also, how can i include other React libraries like 'Tabs' from react-tabs?
If you index.js which is loaded inside your html contains <MainPage />, that means you did not compile your code. Browsers do not support text/jsx natively.
In order to use react with JSX you will need to use a compiler / bundler like webpack.
As you are just learning React.Js for the first time, please consider #Kapil's answer:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem