How to use external vue npm components - javascript

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.

Related

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 to use a Vue Component (.udm.js) in a basic Vue html file?

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>

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/

Blank page after updating to vuejs 2.0

i'm sure it's a simple thing for you but i lost already hours for that. i'm trying to upgrade my application to 2.0.
I used vuejs on top of the application for some functionality, not as vuejs application. That worked so far with vuejs 1.
previously initiate on body element. but now i get an empty page. i also wrapped it in a div and called it:
const app = new Vue({
el: '#app',
});
and the HTML:
<html>
<body>
<div id="app">
<div class="app-wrapper">
<h1>My stuff</h1>
</div>
</div>
</body>
</html>
i understand that it does overwrite my div content but how can then apply it to a already rendered page? Or how can i load the rendered page into that div again?
Thanks for any help!
Thank's guys for you help.
At the the end, the issue was because I use Webpack and the I need to add to the webpack configuration file.
//webpack.config.js
module.exports = {
entry: {...},
output: {...},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
},
...
};
Updated 02/06/2020
From dist/README.md VueJS
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}

VueJS components

I want to make use of VueJS components to clean up my scripts. Therefore I have a component for each page I am loading in into Laravel. Everything works fine so far. But I have issues transfering my current script logic to a component.
This is the current script setup importing the to be used components:
main.js
import HomeView from './components/HomeView.vue';
import IncidentView from './components/IncidentView.vue';
window.app = new Vue({
el: '.content',
components: {
HomeView, IncidentView
},
methods: {
// Init GIS
init: function() {
// Initialize GIS Map
initGISMap(this.$els.map);
},
}
(...)
}
Key for me is the window.app = new Vue... part. I make use of google maps and therefore when the page is loaded it searches for an app.init method. This is part of the script I am loading within the blade template:
<!DOCTYPE html>
<html>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
<h1>
#yield('page_title')
<small>#yield('page_description')</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
#if (isset($vueView))
<component is="{{ $vueView }}">
#endif
#yield('content')
</component>
</section>
<!-- /.content -->
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=app.init" async defer></script>
</body>
</html>
The individual pages (where I create for each a module in Vue) look like this:
#extends('app', ['vueView' => 'home-view'])
#section('page_title', 'title')
#section('page_description', 'title')
#section('content')
content
#endsection
By defining the vueView variable, the correct module I am importing in my script is used.
The goal is to use HomeView component as the main google maps view. And the other components for different pages I load when clicking the corresponding link in my theme. At the end, I do not want to have all VueJS code in one script. Therefore the models.
When I transfer all the content of this current JS file, I get an error complaining that app.init is not a function. The component looks like this:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
How do I modify my component in a way, that the app.init load would still work?
Someone has already mentioned GuillaumeLeclerc/vue-google-maps which is available on npm as vue-google-maps, but be warned that that version only works with vue 1.x
If you are using v2, look at this great vue2 fork xkjyeah/vue-google-maps - it's available as vue2-google-maps on npm.
The API is straightforward and doesn't diverge far from the v1 version, and the repository is much more active than its upsteam counterpart.
It really made my vue map work a lot more painless than rolling my own, which is what I was initially doing.
I hope that helps
Maybe you should use, or at least study the code, of a package that does that.
For example, you can check vue-google-maps on Github : https://github.com/GuillaumeLeclerc/vue-google-maps/
It defines a whole lot of Components related to Google Maps.
If I understand you right, you have a Google Maps script which, when loaded, calls window.app.init, right?
Does your Vue component have an init() method (none is shown above)? If there was one, it would need to be at app.methods.init() remember for VueJS, standard callable methods live under methods key.
Alternatively: you don't mention if your app.init is part of the Vue component or not. If its not it would appear that your app.init function is being overridden because you are redefining window.app as your vue component.
Lastly, if your init is part of Vue, is your google maps fn callback calling this init() before the Vue is loaded and therefore no such method exists (yet)?

Categories

Resources