We Keep Coding

Converting index.html into a vue component

I'm building a webpage using Vue.js, and I'm relatively new to Javascript. I'm using Vue because I find the way it uses component .vue files makes it easier to program in Javascript.
However, looking at GitHub to help with libraries, code, etc. makes it hard, since they are usually written as one .html page.
I found a library that I'd like to use, but I'm not sure how I would create a Vue component out of it. This is because it isn't really returning anything. I'm not sure how to export default{} the stuff so that I'm able to use it in my App.vue.
Furthermore, the HTML and the script are kinda integrated so I was wondering would this change how I implement it?
Here is the index.html:
$(document).ready(function() {
var map = new FlightsMap("schedules_map", {
width: 960,
height: 440,
stations: "stations.json",
flights: "flights.json"
});
$("#reset").click(function() { map.reset(); });
$("#zoom_in").click(function() { map.zoomIn(); });
$("#zoom_out").click(function() { map.zoomOut(); });
$("#show_schedules").click(function() { map.showSchedules(); });
});
#station_name {
display: inline-block;
float: right;
}
a {
cursor: pointer;
}
<script src="https://cdn.rawgit.com/santiagohecar/flights-map/master/dist/flights-map.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="schedules_map"></div>
<div style="width:800px;">
<a id="reset" href="javascript:void(0)">Reset</a>
<a id="zoom_in" href="javascript:void(0)">Zoom in</a>
<a id="zoom_out" href="javascript:void(0)">Zoom out</a>
<a id="show_schedules" href="javascript:void(0)">all</a>
<div id="station_name" ></div>
</div>
From here

This should work for you:
Map.vue - this is a Vue component
<template>
<div>
<div id="schedules_map"></div>
<div style="width:800px;">
<a #click="map.reset()" href="#">Reset</a>
<a #click="map.zoomIn()" href="#">Zoom in</a>
<a #click="map.zoomOut()" href="#">Zoom out</a>
<a #click="map.showSchedules()" href="#">All</a>
<div id="station_name"></div>
</div>
</div>
</template>
<script>
import FlightsMap from "../../node_modules/flights-map/src/flights-map";
export default {
name: "Map",
props: ["flights", "stations"],
data() {
return {
map: {}
};
},
watch: {
flights() {
this.createMap();
},
stations() {
this.createMap();
}
},
methods: {
createMap() {
this.map = new FlightsMap("schedules_map", {
width: 960,
height: 440,
stations: this.stations,
flights: this.flights
});
}
},
mounted() {
this.createMap();
}
};
</script>
<style scoped>
#station_name {
display: inline-block;
float: right;
}
a {
cursor: pointer;
margin: 1rem;
}
</style>
Installation
You'll need to install flights-map with npm, or reference it from some local source. flights-map isn't a npm package, so you will have to install it directly from GitHub:
npm install https://github.com/hrcarsan/flights-map.git
Depending on where you locate your component, you will need to change the path to flights-map accordingly. When I was testing it, I had this file structure:
node_modules/
┗ flights-map/
┣ src/
┗ ┗ flights-map.js
src/
┗ components/
┗ Map.vue
┣ main.js
┗ App.vue
So you need to go two levels up from Map.vue to get above node_modules and src, then down to flights_map/src/flights-map.js Also note that there is a dist/ directory in flights-map/, with a different flights-map.js, but that one doesn't work properly. So make sure that your path goes to the src directory, not dist
Using Map.vue
App.vue
<template>
<Map
stations="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/stations.json"
flights="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/flights.json"
></Map>
</template>
<script>
import Map from "#/components/Map.vue";
export default {
name: "App",
components: {
Map
}
};
</script>
Whenever you want use the Map component, just call it like so (note that you need to import it on each seperate view you use it on) :
<Map
stations="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/stations.json"
flights="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/flights.json"
></Map>
stations is the url of stations.json.
flights is the url of flights.json
Sidenote:
The watchers in Map.vue aren't required, they are there just to make the map reactive. You can remove them and the createMap() method too. Just put the contents of createMap() in mounted()

Unable to find CSS in angular

I have generated component using cli
"ng generate component registration"
it created following files
registration.component.html
registration.component.scss
registration.component.spec.ts
registration.component.ts
Now, I haved added a css class in scss file
.loginBox {
width: 260px;
}
Now in the html file
<p class="loginBox"> test </p>
It pointed out that loginBox is undefined CSS in my IDE and when I tested in ng serve it didnt show the css was applied.
When I do autocomplete on the class= I saw there are alots of css that I didnt add such as L0, L1, L2, L3 ....so where does those css coming from and why doesnt my local css work? Edit: those css seems like bootstrap css or somewhat buildin css there are something like mat-action-row or other type of css I dont think I included them.
The ts file I have included styleUrls: ['./registration.component.scss']
Edit: even if I added it the global styles.scss it is still says the loginBox is undefined CSS. It is likely some config or something is missing....I cant figure out what it is...
Edit:
registration.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
registration.component.scss
.loginBox {
/* color: #4C4633; */
/* font-size: 12px; */
/* margin-bottom: 10px; */
/* padding: 10px 0px 10px 10px; */
width: 260px;
}
registration.component.html
<p class="loginBox">
registration works!
</p>
<div class="loginBox"> test </div>
Above registration folder..
app.component.html
<div class="container-fluid p-0">
<router-outlet></router-outlet>
</div>
app.module.ts
const routes: Routes = [
{ path: '', component: RegistrationComponent}
];
#NgModule({
declarations: [RegistrationComponent],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [PreviousUrlService, {provide: APP_BASE_HREF, useValue : '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }

See this answer here. Use encapsulation: ViewEncapsulation.None in the #component definition.

is scss correctly read? try to run this command
ng config schematics.#schematics/angular:component.styleext scss
then, re-run you project

try:
:host ::ng-deep{
.loginBox {
width: 260px;
}
}

Third party VueJS component can't be found in node_modules

Using vue-cli version 3 for a new vuejs project (I've been studying a lot of vuejs, but this is the first time trying to implement a third-party component). I'm trying to use a grid component that looks impressive. The component is here.
I've setup my environment, installed the grid and component using npm as instructed from their site, configured my own component and imported everything (I thought) properly. I've even setup an data array property to use as a test to fill my grid. I ran npm install and confirmed the folders were installed in my node_modules folder (they are there). Here is my main.js:
import Vue from 'vue'
import App from './App.vue'
import CGrid from 'vue-cheetah-grid'
Vue.config.productionTip = false;
Vue.use(CGrid);
new Vue({
render: h => h(App)
}).$mount('#app')
And here is my App.vue :
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<reports-grid></reports-grid>
</div>
</template>
<script>
import ReportsGrid from './components/ReportsGrid.vue'
export default {
name: 'app',
components: {
reportsGrid: ReportsGrid
}
}
</script>
Here is my component file, ReportsGrid.vue:
<template>
<div class="grid">
<c-grid ref="grid" :data="records" :frozen-col-count="1">
<c-grid-column field="team" width="85">
Team
</c-grid-column>
<c-grid-column-group caption="Estimate">
<c-grid-column field="quotenum">
Quote #
</c-grid-column>
<c-grid-column field="quotedate">
Date
</c-grid-column>
<c-grid-column field="customer">
Customer
</c-grid-column>
<c-grid-column field="country">
Country
</c-grid-column>
<c-grid-column field="type">
Type
</c-grid-column>
<c-grid-column field="quoteamount">
Quote Amount
</c-grid-column>
</c-grid-column-group>
<c-grid-column-group caption="Sales Order">
<c-grid-column field="salesordernum">
Sales Order #
</c-grid-column>
<c-grid-column field="salesorderamount">
Sales Order Amount
</c-grid-column>
<c-grid-column field="margin">
Average Margin
</c-grid-column>
<c-grid-column field="status">
Status
</c-grid-column>
</c-grid-column-group>
</c-grid>
</div>
</template>
<script>
export default {
name: 'app',
data: function() {
return {
records: [
{
team: 'GG', quotenum: '20211', quotedate:'today', customer: 'AirNN', country: 'Peru', salesordernum: '11111',
type: 'Production', quoteamount: '$1300', salesorderamount: '$1200', margin: '25%', status: 'WIN Partial'
},
{
team: 'LL', quotenum: '20200', quotedate:'today', customer: 'Paris', country: 'Mexico', salesordernum: '11122',
type: 'Bid', quoteamount: '$12300', salesorderamount: '$10300', margin: '20%', status: 'WIN Partial'
}
]
}
}
}
</script>
When I run this I don't see anything on my page (no errors either). I noticed in my main.js my linter is throwing an error on the line import CGrid from 'vue-cheetah-grid' (this error doesn't show up in my terminal, just in my main.js:
[ts]
Could not find a declaration file for module 'vue-cheetah-grid'. 'path.to/node_modules/vue-cheetah-grid/dist/vueCheetahGrid.js' implicitly has an 'any' type.
Try `npm install #types/vue-cheetah-grid` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-cheetah-grid';`
This is a new error to me. The folders are in the node_modules folder. I even tried the npm install #types/vue-cheetah-grid but it still didn't work.

The problem appears to be with the height style.
Looking at the page source for the Cheetah Vue demo, they have dropped in some styles that seem to override the standard cheetah styles.
If you add this to your component, it looks ok
<style scoped>
html {
height: 100%;
}
body {
height: calc(100% - 100px);
}
.contents {
padding: 30px;
box-sizing: border-box;
}
.demo-grid {
width: 100%;
height: 300px;
box-sizing: border-box;
border: solid 1px #ddd;
}
.demo-grid.large {
height: 500px;
}
.demo-grid.middle {
height: 300px;
}
.demo-grid.small {
height: 240px;
}
.log {
width: 100%;
height: 80px;
background-color: #F5F5F5;
}
.hljs {
tab-size: 4;
}
</style>

Nuxtjs error render function or template not defined in component: carousel

I have installed vue carousel via npm
"dependencies": {
"nuxt": "^1.0.0",
"vue-carousel": "^0.6.9"
},
Now in my nuxt configurations
plugins: [
'~/plugins/vue-carousel'
],
And the vue-carousel.js
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
Now in my components am using it as
<template>
<div>
<carousel>
<slide>
Slide 1 Content
</slide>
<slide>
Slide 2 Content
</slide>
</carousel>
</div>
</template>
<script>
import Carousel from 'vue-carousel';
import Slide from 'vue-carousel';
export default {
components:{
Carousel,Slide
}
}
Where am i going wrong as am getting an error
render function or template not defined in component: carousel

Nuxt has a different way to configure and include packages like vue-carousel in the project
Below are the steps
Install vue-carousel as local dependency
npm install --save vue-carousel
In nuxt project, under plugins directory create a file plugins/externalVueCarousel.js and add vue-carousel as a global component (reference link)
import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel);
In nuxt.config.js file , include below code under plugins
plugins: [{ src: '~/plugins/externalVueCarousel.js', ssr: false }],
The project is now ready to use vue-carousel in pages or components. vue-carousel is configured with global scope.
Under pages or components try the examples given in vue-carousel official website
Sample program
Place below code under pages/components and validate the result in-case if you would like to test a program ASAP
<template>
<div class="mycarousel">
<carousel :perPage="1">
<slide>
<span class="label">Slide 1 Content</span>
</slide>
<slide>
<span class="label">Slide 2 Content</span>
</slide>
<slide>
<span class="label">Slide 3 Content</span>
</slide>
</carousel>
</div>
</template>
<style>
body{
background-color: yellow;
}
.mycarousel{
left: 50%;
top: 50%;
position: relative;
width: 700px;
transform: translateX(-50%);
}
.VueCarousel{
display:inline-block;
}
.VueCarousel-slide {
position: relative;
background: #42b983;
color: #fff;
font-family: Arial;
font-size: 24px;
text-align: center;
min-height: 100px;
}
</style>
Referred from https://nuxtjs.org/examples/plugins/

Re-rendering a particular component in Angular 2 release version

I have two components: BuilderComponent and InputTextComponent.
With drag and drop I put a directive in the sortableList element of the BuilderComponent template. With the inspector I can see the directive appears in the sortablelist DOM element:
<div class="row">
<div class="col-md-12">
<ul id="sortableList">
<zbjfb-input-text></zbjfb-input-text>
</ul>
</div>
How can I force the BuilderComponent to detect that the content of the template is changed since the last compile and then re-render the template with the new added directive so I can see the new compiled InputTextComponent.
BuilderComponent:
import { Component } from '#angular/core';
#Component({
selector: 'zbjfb-builder',
template: '
<div class="row">
<div class="col-md-12">
<ul id="sortableList">
</ul>
</div>
</div>
'
})
export class BuilderComponent {}
InputTextComponent:
import { Component } from '#angular/core';
#Component({
selector: 'zbjfb-input-text',
templateUrl: './input-text.component.html',
styleUrls: ['./input-text.component.css']
})
export class InputTextComponent {}
Any idea?
Thanks in advance.

If your drag'n'drop solution is HTML5 based, maybe you can make use of HostListener decorator from '#angular/core' to hack your drag and drop exchange logic:
Add something like this on your drop area component:
#HostListener('drop', ['$event'])
onDrop(event: any) {
//do something
}
And something like this on your draggable component:
#HostListener('dragstart', ['$event'])
onDrag(event: any) {
//do something
}
HostListeners provide you ways to implement conventional listeners for element events like onmousedown, onkeyup, ondrop, ondrag.
Then think of some logic to identifiy what's being dragged/dropped and change the drag area component model. Here's some functional code I've made inspired by W3Schools topic on drag'n'drop:
import { Component, HostListener, Input } from '#angular/core';
// The draggable component
#Component({
selector: 'dragme',
template: `
<div draggable="true">
Drag {{name}}!
</div>
`,
styles: [`
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: element;
-webkit-user-drag: element;
background-color: #AAA;
border: 1px solid black;
padding: 24px;
margin: 12px;
}
`]
})
export class DragMe {
#Input()
name:string = "";
#HostListener('dragstart', ['$event'])
onDrag(event:any){
event.dataTransfer.setData("name",this.name);
}
}
// The drop area component
#Component({
selector: 'drop',
template: `
<div class="drop">
Drop over me!
<ul>
<li *ngFor="let i of items">{{i}}</li>
</ul>
</div>
`,
styles: [`
.drop{
border: 1px solid black;
padding: 24px;
}
`]
})
export class DropOverMe {
items:string[] = [];
#HostListener('dragover', ['$event'])
onDragover(event:any){
event.preventDefault();
}
#HostListener('drop', ['$event'])
onDrop(event:any){
event.preventDefault();
var name = event.dataTransfer.getData("name");
this.items.push(name);
}
}
// The functional example
#Component({
selector: "drag-example",
template: `
<dragme name="Bob"></dragme>
<dragme name="Alice"></dragme>
<dragme name="Carl"></dragme>
<drop></drop>
`
})
export class DragExample{
}
Full code at: https://github.com/rafaelodon/angular2-html5-dragndrop-example