Laravel/Vue Send Data between components - javascript

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

Related

Vue.js in Laravel

I am trying to use vue.js with laravel for the first time.
In the blade.php file:
<html>
<body class>
<div id="app">
<favourup></favourup>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
In the app.js file:
Vue.component('favourup', require('./components/Favourup.vue'));
const app = new Vue({
el: '#app',
});
In the vue file:
<template>
<div>
<h2>FavourUp</h2>
</div>
</template>
I am not getting any errors however the local host displays an empty web page when it should display 'FavourUp'
you should write .default at end of require vue components because of part of the vue-loader 15 updates, if your code uses the CommonJS syntax for importing EcmaScript modules, you'll need to append .default:
https://laravel-mix.com/docs/4.0/upgrade#importing-es-modules
but as #Ifaruki said you can import it too here's the code:
// first
Vue.component('favourup', require('./components/Favourup.vue').default);
// second
import Favourup from './components/Favourup.vue';
Vue.component('favourup', Favourup);

Use Vue.js with ReactiveSearch in existing project

I have an existing web appliction that is not taking advantage of any existing reactive
frameworks or technology (like Angular, Vue or React).
I want use Vue.js with the ReactiveSearch opensource libary without rewriting my whole application.
While working through the tutorial (https://docs.appbase.io/docs/reactivesearch/vue/overview/QuickStart/) I encountered the following problem:
I can't use the components of the ReactiveSearch-Libary and I don't know why.
In my example I want create a multi-list component as described in the tutorial.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#appbaseio/reactivesearch-vue#1.0.0-beta.19/dist/#appbaseio/reactivesearch-vue.umd.js"></script>
</head>
<body>
<div id="app">
<reactive-base app="good-books-ds" credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d">
<h1>Hello from ReactiveBase</h1>
<multi-list
componentId="Authors"
dataField="authors.raw"
class="filter"
title="Select Authors"
selectAllLabel="All Authors"
/>
</reactive-base>
</div>
<script>
import { ReactiveBase } from '#appbaseio/reactivesearch-vue';
Vue.config.productionTip = false;
Vue.use(ReactiveBase);
const vueApp = new Vue({
el: '#app'
})
</script>
</body>
</html>
I get following error message:
SyntaxError: import declarations may only appear at top level of a module

How do I pass data from Vue Instance to a Single File Component

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>

Trying to change data vue.js

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/

How to embed widget written by vue into a vue webapp

I'm building a website with Vuejs. I have the code like this
app.js
new Vue({
el: '.page-wrapper',
...
})
index.html
<body>
<div class="page-wrapper">
<!-- content-->
</div>
</body>
Now I want to embed a widget which is built by Vuejs like
<div id="widget"></div>
<script src="https://widget.com/widget.js"></script>
inside page-wrapper class.
I've tried to put the script tag outside the origin Vue component but the content of widget still did not render.
I'm new to Vuejs, could anyone help me out?
I'm just going to take a stab at this...
index.html
<div id="app">
<my-widget></my-widget>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
<script src="https://widget.com/widget.js></script>
<script src="main.js"></script>
main.js
Vue.component('my-widget', {
template: '<div id="widget"></div>'
});
new Vue({
el: '#app'
});
My Vue instance is #app and I'm loading your widget.js asset in index.html. I'm probably completely underestimating this, apologies if that's the case!

Categories

Resources