Created a project with monaca / vue2 / onsenui splitter template.
Defined a test method into the main.js file as follow :
import 'onsenui';
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
// Onsen UI Styling and Icons
require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');
import App from './App.vue';
Vue.use(VueOnsen);
var app = new Vue({
el: '#app',
template: '<app></app>',
components:{App} ,
methods: {
test: function () {
console.log('testing');
}
}
});
then call to method is here on #click into homepage.vue
<template>
<v-ons-page>
<custom-toolbar :title="'Home'" :action="toggleMenu"></custom-toolbar>
<p style="text-align: center">
Welcome home.
<button v-on:click="test">test</button>
</p>
</v-ons-page>
</template>
<script>
import customToolbar from './toolbar'
export default {
props: ['toggleMenu'],
components: { customToolbar }
}
</script>
Its always returning method as undefined, i am missing something...
Project structure :
Related
Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
template>
<v-app>
<Navbar/>
<div>
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</div>
</v-app>
</template>
<script>
import Navbar from '#/components/Navbar'
export default {
name: 'App',
components: {
Navbar
},
data: () => ({
//
}),
};
</script>
Navbar.vue (current)
<template>
<div>
<v-app-bar app flat color="">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>
<span>Sample App</span>
</v-toolbar-title>
</v-app-bar>
</div>
</template>
....
....
Navbar.vue (desired)
no template because I want to use render function
<script>
export default {
...
...
render(createElement){
const icon = createElement('v-app-bar-nav-icon')
return createElement('v-app-bar', [icon])
...
...
}
}
When I try this I get an errors:
vue.common.dev.js?4650:630 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any suggestions?
For future reference:
You simply have to import the vuetify components manually into the vue component.
Navbar.vue
<script>
import { VAppBar, VAppBarNavIcon } from "vuetify/lib";
export default {
render(createElement) {
const icon = createElement(VAppBarNavIcon)
return createElement(VAppBar, {}, [icon]);
},
};
</script>
More info at this link.
I've created a component which will be used multiple times on the site and represents a row of a table.
Now I want each instance of this component to update itself according to the messages received via websocket.
I tried to register an onmessage listener in the created() method of the component, but it doesn't seem to work like this. created() gets called for each row of the table, but the listener doesn't show any effect.
When I register the listener in my "main" App.vue it's working. But I'd like it in my component so I have easy access to it's properties.
Can you give me some hints what I'm doing wrong?
Here's a sample of my component:
<template>
<div class="feed-item">
<div class="feed-element">{{feed.name}}</div>
<div class="feed-element">{{feed.idle}}</div>
<div class="feed-element">{{feed.unseen}}</div>
<div class="feed-element">{{feed.last_message}}</div>
<div class="feed-element">{{feed.page}}</div>
</div>
</template>
<style scoped>
/* ... */
</style>
<script>
export default {
name: 'feedItem',
props: {feed: Object},
created () {
this.$options.sockets.onmessage = (data) => console.log(data)
},
}
</script>
And I loaded vue-native-websocket im my main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://127.0.0.1:9000', {
format: 'json',
// store: store,
reconnection: true,
reconnectionDelay: 1000
})
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
})
I'm trying to make a new Vue app with 2 components but the components don't render.
The error is - "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
I read quite a bit on the problem but could not identify the problems in the code unlike with others' codes.
Seems OK to me, not the first app with components I've written :/
App:
require('../../lib/jquery.event.drag-2.2/jquery.event.drag-2.2');
require('../../lib/jquery.event.drag-2.2/jquery.event.drag.live-2.2');
require('../../lib/jquery.event.drop-2.2/jquery.event.drop-2.2');
require('../../lib/jquery.event.drop-2.2/jquery.event.drop.live-2.2');
import Vue from 'vue';
import Axios from 'axios';
Vue.prototype.$http = Axios;
import tournamentCourtManager from
'../../components/tournament/courtManager/courtManager';
import tournamentScheduleButton from
'../../components/tournament/tournamentScheduleButton';
import { store } from "../../store/store";
new Vue({
el: '#tournamentMatchSettingsApp',
store,
components: { 'tournamentCourtManager' : tournamentCourtManager,
'tournamentScheduleButton' : tournamentScheduleButton }
});
tournamentCourtManager:
<template>
<button type="submit" class="btn btn-info">
dadada
</button>
<script>
export default {
name: 'tournamentScheduleButton',
data() {
return {}
},
mounted: function mounted() {
},
methods: {
}
}
</script>
courtManager:
<template>
<div id="tournamentCourtManager">
..
</div>
</template>
courtManager JS:
export default {
name: 'tournamentCourtManager',
components: {
'match-cell': matchCell
},
data() {
return {
};
},
....
}
And the code that prompts the error -
<tournamentschedulebutton></tournamentschedulebutton>
<tournamentcourtmanager></tournamentcourtmanager>
Because you have named the components like 'tournamentCourtManager' in the components object, they must be named like <tournament-court-manager> in the template.
When I am using another template (Header.vue) inside the main template Index.vue, it throws an error "$scrollTo" is not defined.
Note : $scrollTo is provided by the module "vue2-scrollspy" which I have installed.
However if I paste the entire code of Header.vue inside Index.vue it works fine.
Index.vue
<template>
<div class="scroll-div">
<mainheader></mainheader>
</div>
</template>
<script>
import mainheader from './Header.vue'
export default {
name: 'MyApplication',
components:{
mainheader
}
}
</script>
Header.vue
<template>
<div class="main-Header">
<b-navbar toggleable="md" type="dark" variant="dark" fixed="top">
<div class="container">
<b-navbar-brand #click="$scrollTo(0)"></b-navbar-brand>
</div>
</b-navbar>
</div>
</template>
<script>
export default {
name : 'mainheader',
data () {
return {
msg: 'Welcome to SportsBee',
scrollPos: 0
}
}
}
</script>
index.js
import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);
Vue.use(VueAxios, axios);
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
component: index
}
], mode:"history"
})
export default router;
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
I tried to use a vue component(Global.vue) in other component(App.vue), but there
Failed to mount component: template or render function not defined
error.
Global.vue:
<template>
<div class="global-view">
<p>Global </p>
</div>
</template>
<script>
export default {
name: 'global'
}
</script>
App.vue:
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.component('global', require('./components/Global'))
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
You need to import the component within the component file that you want to use it in.
`import Global from './components/Global'
From there you need to add a new key inside your components option that will "register" the component.
Here is what you want your app component to look like.
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
import Global from './components/Global
export default {
name: 'app'
components: {
'global': Global,
}
}
</script>
<global></global> should be able to render at this point.
I use import instead of require(in main.js) and it works for me:
import Global from './components/Global.vue
Vue.component('global', Global)`