Use Vue.js with ReactiveSearch in existing project - javascript

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

Related

Laravel/Vue Send Data between components

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

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);

Multiple Vue instances bind to parent & child elements

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.

How to use external vue npm components

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.

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