i am trying to override my data in the App.vue component. But everytime it takes the default data from the component if i try to overwrite it in my main.js. I am also making use of webpack
App.vue
<template>
<div class="message">{{ message }}</div>
</template>
<script>
//import TopBar from './top-bar.vue'
export default {
name: 'App',
data () {
return {
message: 'hello world'
}
}
}
</script>
main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
template: '<App/>',
components: { App: App },
data: {
message: 'New text'
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
Ok I think youve got yourself confused about what is doing what. Your App.vue component and your main.js vue instance each have their OWN instance of the data property. If you want your main.js to be able to pass data into your component you need to expose a prop to do this in. If you want your app.vue component to be able to communicate with your main.js vue instance then you must raise an event and main.js must be listening for that event. I would highly suggest that you spend a day or two with the vuejs documentation. Its honestly some of the best software docs I have ever come across, and your problem is addressed pretty early on in the tutorial.
https://v2.vuejs.org/v2/guide/
Related
We are trying to convert our app from jQuery to Vue in Laravel. One of the option we have is to do components by one since we are can't do everything from scratch.
One of the option is something like this.
require('./bootstrap');
import Vue from "vue"
import bla1 from "./vue/bla1"
import bla2 from "./vue/bla2"
const app = new Vue({
el: '#app',
components: {
bla1,
bla2
}
});
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="app">
<!-- Theres gonna have HTML HERE --->
<bla1 />
<bla2 />
<!-- Theres gonna have HTML HERE --->
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
As you can see, we are just adding seperate components. Is there a way those components can pass data to each other even not under the parent component?
Any input will be appreciated. Thanks
I built a Vue component that was packaged with "build-bundle": "vue-cli-service build --target lib --name my-component ./src/myComponent.vue". In the dist folder I have:
demo.html
my-component.common.js
my-component.udm.js
my-component.udm.min.js
Now, for the GitHub Page publication, I'am building a page explaining the details and the features of the component. I'll use a /docs folder as root for the GitHub Page (I don't want to use a gh-pages branch).
For this, I have to build a basic Vue App without Vue CLI, Webpack or so.
The index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/my-component.umd.js"></script>
...
</head>
<body>
...
<div id="app">..</div>
...
<script type="module">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
components: {
myComponent: my-component
}
})
</script>
</body>
</html>
Info: I copied dist/my-component.umd.js to the docs/js folder in order to have a standalone folder.
The page works well if I do not use the component in the Vue script (Vue works properly). But, when I use the component, the page shows this error (index):199 Uncaught ReferenceError: vue is not defined which is pointing directly to myComponent: my-component.
Any idea or suggestion?
Try putting the scripts in the body section before your app code. Otherwise, Vue library could be loaded after running your app code
<!DOCTYPE html>
<html lang="en">
<head>
...
...
</head>
<body>
...
<div id="app">..</div>
...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/my-component.umd.js"></script>
<script type="module">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
components: {
myComponent: my-component
}
})
</script>
</body>
</html>
I would like to ask for best setup of Vue instances (components), when I do not want use SPA.
My HTML looks like:
<html>
<div id="layout">
<div>Some Layout based content...</div>
<div id="homepage">
<simple-form-component></simple-form-component>
</div>
</div>
<script type=text/javascript src="homepage.js"></script>
<script type=text/javascript src="layout.js"></script>
</html>
Currently I have simple example ot two .js files:
layout.js
homepage.js
// layout.js
import Vue from 'vue/dist/vue.js'
new Vue({
el: '#layout',
});
// homepage.js
import Vue from 'vue/dist/vue.js';
import SimpleForm from '../../../../components/SimpleForm.vue';
new Vue({
el: '#homepage',
components: {
SimpleForm,
},
});
It seems to work fine, but I am suspicious that this is not 100% correct, due to console error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
(found in )
Do you have any ideas/experience how to setup my scenario correctly?
PS: I would like to have my JS split into different files, managed by webpack and distributed by backend.
Thank you,
Mario
I've found workaround v-pre, my HTML will change the line: <div id="homepage" v-pre>. One small issue is, that I will not see my components in Vue Devtools.
I've been working with Vue for sometime, but I've never really tried working with Single File Components alongside webpack. Here's the problem I'm having. I have 2 files: main.js (which contains the Vue root instance) and App.vue (which is a single file component. The code in each file goes as thus:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: { App, },
data(){
return {
greeting: "Hello World!",
}
},
render: h => h(App),
});
App.vue:
<template>
<div id="app">
{{greeting}}
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Please note that I'm using webpack, and the main.js file is meant to be an entry point. The code is bundled to a file called bundle.js.
Now, my problem is that, when the template in App.vue renders, it doesn't show "Hello Word", which is the value of {{greeting}}. I expect that data passed from the root Vue instance in main.js should be available to the App.vue component.
The {{greeting}} isn't evaluated when I put it in my index.html file, which links to bundle.js (the bundled version of main.js)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nothing</title>
<script src="/dist/build.js"></script>
</head>
<body>
<div id="app"></div>
{{greeting}}
</body>
</html>
Does this mean that data in the root vue instance isn't available anywhere? What should I do?
The greeting needs to be in your component's data. This has nothing to do with SFC (Single File Components), it's just the way Vue's templates work: they read from the component's data.
So what you need to do is move the data to the appropriate component, which is tied with the template where you're trying to use.
<template>
<div id="app">
{{ greeting }}
</div>
</template>
<script>
export default {
name: 'App',
data () {
return { greeting: 'Hello World!', }
},
}
</script>
I am new to Vue.js, and am currently trying to use it in an existing solution.
It is not possible for me to use .vue files. It's a standalone system, not using webpack. I need the files locally to make it work. In the example below, I have used .js's online.
I want to use this datepicker: https://github.com/mengxiong10/vue2-datepicker
My problem is that the datepicker isn't rendered.
I don't know how to register the component.
I have tried to isolate what I want to do in a simple standalone example below.
I want to understand, how to register the external component. I have tried a lot of methods, and needs a helping hand.
I hope someone out there have the knowledge and time to help me out.
Thanks in advance!
Here is what I do:
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>
<div id="app">
<input type="text" v-model="Data.SomeText" />
<date-picker v-model="Data.SomeDate"></date-picker>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { Data: '' },
components: {
'date-picker': DatePicker
},
created: function () {
this.Data = {"SomeText":"Hey","SomeDate":"2017-12-24T00:00:00"};
}
});
</script>
</body>
</html>
The vue2-datepicker script is wrapped in a CommonJS module, which has a default export. In order to access it you have to specify you are accesing the default export:
components: {
'date-picker': DatePicker.default
},
Working demo:
var vm = new Vue({
el: '#app',
data: {
Data: ''
},
components: {
'date-picker': DatePicker.default
},
created: function() {
this.Data = {
"SomeText": "Hey",
"SomeDate": "2017-12-24T00:00:00"
};
}
});
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>
<body>
<div id="app">
<date-picker v-model="Data.SomeDate"></date-picker>
</div>
</body>
As a sidenote, consider starting to develop with the webpack environment (you can use ready to use templates: https://github.com/vuejs-templates/webpack-simple). It takes effort initially to learn npm and some command line usage, but it is worth it in the long run: it will allow you to use Single File Components, easier plugin importing (some plugins may not be prepared to be included via <script> as it is the one you are using) and other advantages.