vue-component

I am trying to make a Vue Component for TinyMCE but I am facing some problems that I can not solve! Can anybody help me? Or maybe advise a better way to walk ? There is my Component import Vue from 'vue' import _ from 'lodash' export default { props: { model: { default () { return null } }, showLeadInfo: { default () { return false } } }, data() { return { id: 'editor_' + _.random(10000, 99999) } }, watch: { model() { if (this.model == null) tinyMCE.activeEditor.setContent(''); } }, ready() { var vm = this; tinyMCE.baseURL = "/vendor/tinymce/"; tinymce.init({ selector: "#" + vm.id, theme:

If you have a vue component that is installed via Node : node_modules/vendor/somecomponent.vue Is there any way to modify/extend the template/methods of this component? Update: After trying out the example below, I'm facing this issue: I am using https://github.com/eliep/vue-avatar and I need to extend this with a prop, and maybe amend the template a bit. import {Avatar} from 'vue-avatar' Avatar = Vue.component('Avatar').extend({ props: ['nationality'] }); export default { components: { Avatar }, ... } Results in TypeError: Cannot read property 'extend' of undefined It doesn't appear to be

I'm new to Vue.js and I'm having a bit of trouble using components with sub-components. I have the following .vue files app.vue <template> <section> <menu></menu> <h1>Create Your MIA</h1> <div id="board"></div> <slider> <skin></skin> </slider> </section> </template> slider.vue <template> <div id="slider-panel"> <h3>{{* heading}}</h3> <div class="slider"> <slot> Some content </slot> </div> </div> </template> <script> import skin from "./skin"; export default { components: { skin: skin } }; </script> skin.vue <template> <div v-for="colour in colours"> <div :style="{ backgroundColor: colour }">

I've been trying whole day to get it to work without any luck so if someone could shine some light that would be very much appreciated. I'm trying to set up environment for working with ES6 files as well as Vue using Webpack. I've installed all dependencies, and created the following files: webpack.config.js module.exports = { entry: './resources/assets/source/js/app.js', output: { filename: 'app.js' }, devtool: 'source-map', resolve: { alias: { 'vue$': 'vue/dist/vue.js' } }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } }, {

I am using lodash to debounce a function call but I am wondering why my this value is not inheriting the scope like I expect. These are are the relevant parts of my Vue component. import debounce from 'lodash/debounce'; watch: { query: debounce(() => { this.autocomplete(); }, 200, { leading: false, trailing: true }), The above case does not work because my this value does not point to the Vue component but rather shows an Object like this: Object __esModule: true default: Object __proto: Object Isn't my arrow syntax suppose to inherit the context of this ? The following seem to works fine:

I am trying to search or filter through 3 fields firstname, lastname and email in my Vue.js 2 application. I understand that Vue 2 does not come with a built in filter method unlike in Vue 1, hence I created a custom method which is only able to filter through just one field. How do I extend this to multiple fields? I have tried something like this filterBy(list, value1, value2, value3) but it does not work. This is my code <template> <div class="customers container"> <input class="form-control" placeholder="Enter Last Name" v- model="filterInput"> <br /> <table class="table table-striped">

I have integrated intercom in my app and I need to call window.Intercom('update'); every-time my url changes. I know I could add it on mounted() but I rather not modify all my component and do it directly using the navigation guards . (Mainly to avoid to have the same code in 10 different places. At the moment I have: router.afterEach((to, from) => { eventHub.$off(); // I use this for an other things, here is not important console.log(window.location.href ) // this prints the previous url window.Intercom('update'); // which means that this also uses the previous url }) This runs intercom(

This is my .vue component file in which I wasn't to use Vue.use() to install vee-validate validation package. The module, as mentioned in the docs, will inject an errors object to the data object. But I do get the error _vm.errors is undefined . I'm not sure if I'm instantiating it properly. Also, will import Vue from 'Vue' and Vue.use(VeeValidate) "use" vee-validate for only this component?(which is what I want it to do). <template> <input class="form-control" name="name" placeholder="Name" type="text" v-model="player.name" v-validate data-vv-rules="alpha|min:2|max:50" :class="{'input': true,

I have a bar component. It is used like this: <template> <div> <!-- stuff --> <bar></bar> <!-- stuff --> <!-- stuff --> <!-- stuff --> <bar></bar> <!-- stuff --> <bar></bar> <!-- stuff --> </div> </template> <style lang="scss" scoped> @media (max-width: 1300px) { // this selector doesn't work, but it would be nice if it did bar { display: none; } } </style> I would like to hide the bar elements when the screen is 1300px or narrower. It would be nice if there was a bar element selector, just like there are p and h1 element selectors. However, there doesn't seem to be, and I have to add class=