It is the first web application I am going to make, so I am totally new to Vue.js Javascript programming. I am using one of Boostrap templates called Beagle.
http://themes.getbootstrap.com/preview/?theme_id=1696&show_new=
I have a file app-charts-morris.js which I hold in my Static folder, here is some code of this file:
var App = (function () {
'use strict';
App.chartsMorris = function( ){
//Donut Chart
function donut_chart(){
var color1 = App.color.warning;
var color2 = App.color.success;
var color3 = App.color.primary;
Morris.Donut({
element: 'donut-chart',
data: [
{label: 'Facebook', value: 33 },
{label: 'Google', value: 33 },
{label: 'Twitter', value: 33}
],
colors:[color1, color2, color3],
formatter: function (y) { return y + "%" }
});
}
donut_chart();
};
return App;
})(App || {});
What it does is it should show me Donut chart with some javascript functions, but nothing appears here only empty space.
Here is my Vue code:
<template>
<div id="donut-chart" style="height: 250px;"></div>
</template>
<script>
export default {
data () {
return {
}
},
computed: {
},
watch: {
},
methods: {
}
}
</script>
and here where I access my javascript file:
<script src="/static/js/app-charts-morris.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
//initialize the javascript
App.init()
App.chartsMorris()
App.ChartJs()
App.dashboard()
});
</script>
my main.js file
import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import * as firebase from 'firebase'
import 'firebase/firestore'
import router from './router'
import { store } from './store'
import {VueMasonryPlugin} from 'vue-masonry'
import InstantSearch from 'vue-instantsearch'
Vue.use(InstantSearch)
Vue.use(Vuetify)
Vue.use(VueMasonryPlugin)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App),
created () {
}
})
What is the problem here? Why vue.js does not show my Donut chart? But it shows without any framework
Here is my Vue code:
If it's your App.vue file, as you initialize your Vue instance on an element #app, you need to add it in your template:
<template>
<div id="app">
<div id="donut-chart" style="height: 250px;"></div>
</div>
</template>
Or change the element to donut-chart:
new Vue({
el: '#donut-chart',
router,
store,
render: h => h(App),
})
<template>
<div id="donut-chart" style="height: 250px;"></div>
</template>
Related
I am creating a simple bar chart using vue-echart and Vue 2. I want to display a bar chart from Comp1.vue inside my home page, App.vue.
App.vue
<template>
<div id="app">
<Comp1/>
</div>
</template>
<script>
import Comp1 from './components/Comp1.vue'
export default {
name: 'App',
components: {
Comp1
}
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueECharts from "vue-echarts";
import "#vue/composition-api";
import "echarts";
Vue.config.productionTip = false
Vue.component("v-chart", VueECharts);
new Vue({
VueECharts,
render: h => h(App),
}).$mount('#app')
Comp1.vue
<template>
<div style="height: 300px;">
<v-chart :options="chartOptionsBar"></v-chart>
Yes
</div>
</template>
<script>
export default {
name: 'Comp1',
data() {
return {
chartOptionsBar: {
xAxis: {
data: ['Latte', 'Espresso', 'Mocha', 'Cappucino']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [100, 50, 25, 10]
}
]
}
}
}
}
</script>
<style scoped>
</style>
I have imported all the possible dependencies but the chart is not rendered. I have no idea how this could happen. How should I solve this so that the chart gets rendered?
<v-chart :options="chartOptionsBar"></v-chart>
I believe here should be option instead of options. According to the readme
edited 2021-01-16
Hi fellow programmers!
I have a problem with my vue-wheater-app. I want to be able to add quotemachine code to my london.vue code. But I do not know how to do that in a good way.
The wheather-app is functioning as I want by itself. But I do want to add a random qoute-machine to my app.
And also how do I add my quotes.js file into my code so it generates new quotes?
also my quote-app is also working by itself. I just need to get the weather app and the qoute-machine to work on the same page. I hope my problem is clear to you. otherwise just ask and I will clearify.
Help is much appreciated as always!:)
This is my wheater-app code London.vue :
<template>
<div id="app">
<main>
<h1>London</h1>
<div>{{ moment(date).format("YYYY-MM-DD") }}</div>
<div>
<div v-if="weatherInfo.length != 0"></div>
<p>{{ weatherInfo.main.temp }} °C</p>
</div>
<div v-for="(weather, index) in weatherInfo.weather" v-bind:key="index">
<img
v-bind:src="
'http://openweathermap.org/img/wn/' + weather.icon + '#2x.png'
"/>
</div>
<p> "{{ currentQuote }}" </p>
<button #click="newQuote"> New Quote</button>
</main>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
quotes,
currentQuote: quotes[0]
}, methods: {
newQuote: function () {
const num = Math.floor(Math.random() * quotes.length)
this.currentQuote = quotes[num]
}
}
})
import axios from "axios";
export default {
name: "London",
props: ["id"],
data() {
return {
weatherInfo: [],
};
},
mounted() {
this.getWeather();
},
methods: {
getWeather() {
axios
.get(
"https://api.openweathermap.org/data/2.5/weather?id=5695743&units=metric&appid=2acef1cd6cef64a2b6d2e405b5067512"
)
.then((res) => (this.weatherInfo = res.data));
},
},
};
</script>
<style>
</style>
This is My app.vue
<template>
<div id="app">
<router-view>
</router-view>
</div>
</template>
<script>
</script>
<style>
</style>
This is my main.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import moment from 'moment'
import London from './components/London.vue'
Vue.prototype.moment = moment
Vue.use(VueRouter)
const routes = [{
path: '/London',
name: 'London',
component: London
}, {
path: '/',
component:London}]
const router = new VueRouter({routes: routes})
Vue.config.productionTip = false
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
This is my quotes.js
var quotes = [
"There's nothing wrong with having a tree as a friend.",
"The secret to doing anything is believing that you can do it. Anything that you believe you can do strong enough, you can do. Anything. As long as you believe.",
"Anytime you learn, you gain.",
"It’s life. It’s interesting. It’s fun."
];
Is possible in Vue.js call component by variable name?
Components are registred:
import Component1 from 'component1'
import Component2 from 'component2'
import Component3 from 'component3'
...
components: {
Component1, Component2, Component3
},
And i am searching for something like this:
created() {
var componentName = 'Component1';
this.components[componentName]
}
You can access the components property like this:
this.$options.components[componentName]
Just a basic example on how you can use dynamic component:
link to jsFiddle to play around: link here
<div id="app">
<component v-bind:is="currentPage">
<!-- component changes when currentPage changes! -->
<!-- output: Updated About -->
</component>
</div>
new Vue({
el: '#app',
data: {
currentPage: 'home'
},
components: {
home: {
template: "<p>Home</p>"
},
about: {
template: "<p>About</p>"
},
contact: {
template: "<p>Contact</p>"
}
},
mounted(){
this.$options.components['about'].template = "<p>Updated About</p>"
this.currentPage = 'about'
}
})
I am trying to use VueRangedatePicker and I can't seem to figure out how to use this on the template of some other vue component. I am using Webpack.
I have registered the component/plugin on my main.js file like this:
import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'
import firebase from './firebase-config'
import vuefire from 'vuefire'
//////////////// HERE
import VueRangedatePicker from 'vue-rangedate-picker' // importing the plugin here
Vue.use(VueRangedatePicker) // using it
Vue.component('VueRangedatePicker', { }) // creating the component globally (if I don't add this line the app complains the component is not registered
////////////////
Vue.config.productionTip = false
let app;
Vue.use(vuefire)
firebase.auth().onAuthStateChanged(function(user){
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: '#app',
template: '<App/>',
components: { App, VueRangedatePicker },
router,
store,
VueRangedatePicker
})
}
})
Then on my component component_A.vue I am again importing the VueRangedatePicker plugin in the following manner:
<template>
<div>
<vue-rangedate-picker #selected="onDateSelected" i18n="EN" />
</div>
</template>
<script>
import firebase,{ itemRef } from '../firebase-config';
import VueRangedatePicker from 'vue-rangedate-picker'
export default {
firebase() {
return {
items: itemsRef,
}
},
name: 'component_A',
data () {
return {
}
},
created() {
console.log(VueRangedatePicker);
},
methods: {
onDateSelected: function (daterange) {
this.selectedDate = daterange
},
}
</script>
I know the plugin/component is registered because when I log the Vue Rangedate Picker on the console I can see the object
However I am getting the an error message like this
I have read the complete readme.md file on the project's github but I am still puzzled. What is Vue_Daterange_picker? Is it a plugin? Is it a component? Is it a plugin that allows me to build a component? I am quite confused. Can you clarify this for me a little better? How can I make this work?
This is because you have registered the component with an empty name.
In main.js :
Vue.component('DatePicker', VueRangedatePicker)
Then in your component use the component as :
<date-picker></date-picker>
I'm new to Vue.js and want to use single-file components, but I don't understand the workflow.
For example, I have three components: App, Grid and List
App.vue
<template>
<div id="app">
<div id="grid"></div>
<div id="right"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'Hello Vue!'
}
}
}
</script>
Grid.vue
<template>
<div id="left"></div>
</template>
<script>
export default {
name: 'grid',
data: function () {
return {
grid: 'some-data'
}
}
}
</script>
List.vue
<template>
<div id="right"></div>
</template>
<script>
export default {
name: 'list',
data: function () {
return {
text: 'some-text'
}
}
}
</script>
Main.js
import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'
new Vue({
el: '#app',
render: h => h(App)
});
new Vue({
el: '#grid',
render: h => h(Grid)
});
new Vue({
el: '#right',
render: h => h(PatternList)
});
It works but I hope this isn't the right way to create nested components.
Can anyone show the way it should be done? Thanks
You can register components using the Vue.component method:
import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'
Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);
new Vue({
el: '#app',
render: h => h(App)
});
And then add them to the App template directly using their tag name:
<template>
<div id="app">
<grid></grid>
<pattern-list></pattern-list>
</div>
</template>
This registers the components globally, meaning that any Vue instance can add those components to their templates without any additional setup.
You can also register components to a Vue instance, like so:
new Vue({
el: '#app',
render: h => h(App),
components: {
'grid': Grid,
'pattern-list': PatternList
}
});
Or within the script tag of a single-file component:
<script>
import Grid from './vue/Grid.vue'
export default {
name: 'app',
components: {
'grid': Grid,
'pattern-list': PatternList
}
});
</script>
This registers the components just to that Vue instance, meaning that those registered components will only be available to use within the template for that Vue instance. A child component would not have access to those registered components unless those components are also registered to the child Vue instance.