When using v-link="{ path: '/add' }" in my vueify (used with Laravel) component, I get a v-link can only be used inside a router-enabled app. or a <router-view> can only be used inside a router-enabled app. error.
Here is my main.js: http://laravel.io/bin/Kkj27
My code seems very similar to the example provided for nestedRoutes, I am not sure why this is not working.
This is all a little confusing to me (best practices for structuring Vue.js single page apps) but this is essentially what I did to make it work:
Vue.component('Todo', Todo);
And removing this whole thing:
var TodoApp = new Vue({
el: '#app',
components: { Todo }
});
After this, I can refer to the Todo component in the router.map function.
router.map({
'/': {
component: Todo,
subRoutes: {
'/bar': {
...
},
'/baz': {
...
}
}
}
})
Related
I want create global method to translate message using Laravel-JS-Localization
But when i call the method using vue mustache got an error like this:
Property or method "trans" is not defined on the instance but referenced during render.
Make sure that this property is reactive.
Here my laravel app.js code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('dashboard', require('./components/Dashboard').default);
const app = new Vue({
el: '#vue',
methods: {
trans: function (key) {
return Lang.get(key);
},
},
});
Dashboard.vue code :
<template>
<p>{{ trans('common.welcome') }}</p>
</template>
<script>
data () {
return {
name: '',
}
},
</script>
dashboard.blade.php code :
..........
<div class="col-9" id="vue">
<dashboard></dashboard>
</div> <!--c end col-8 -->
..........
I would probably go with creating a Plugin. For example
Vue.use({
install (Vue) {
Vue.prototype.$trans = Lang.get
}
})
Adding this to your app.js code before creating any components or new Vue({...}) will mean all your components will have access to the $trans method.
Alternatively, you can create a Global Mixin but these aren't strongly recommended.
Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components
Vue.mixin({
methods: {
trans (key) {
return Lang.get(key)
}
}
})
Using Veulidate, using VueJS 2 on a project built using Vue CLI, I'm simply trying to using a custom method for the purpose of validating a phone number. The method is coming from a global mixin located in main.js.
main.js
Vue.mixin({
methods: {
vd_phone(val) {
var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
return phonePattern.test(val) ? true : false
}
});
form.vue
validations: {
phone: {
required,
phone: this.vd_phone
}
}
Seems simple enough, right? Over and over, I get Cannot read property of 'vd_phone' of undefined. Tried vd_phone, this.vd_phone, this.vd_phone(), etc..
Also tried putting the method into a global methods option (instead of a mixin) and trying to access it via $root like this:
main.js
var vm = new Vue({
router, el: '#app', store,
methods: {
vd_phone() {
var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
return phonePattern.test(val) ? true : false;
}
},
render: h => h(App)
});
Same problem! In my form.vue file I attempted accessing this method using this.$root.vd_phone, $root.vd_phone, etc.. no dice.
This is all I found on the topic: https://github.com/vuelidate/vuelidate/issues/308, but this seems to talk about inheriting entire validator properties - not just a method.
Any help is appreciated.
You're using a factory pattern to instantiate a function from it's source for use in other files. To do this you must export from the source file so other files can import it, like this:
main.js
export default {
vd_phone(val) {
var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
return phonePattern.test(val) ? true : false;
}
}
Then import the file where ever you need that function, and you will have access to it.
Edit
I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - using NativeScript vue, and vuex. It seems that in order to get at the methods needed to do routing [$navigateTo etc] this plugin needs to be set up slightly differently from the examples given in docs.
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
import { handleOpenURL } from 'nativescript-urlhandler';
new Vue({
mounted() {
handleOpenURL( (appURL) => {
console.log(appURL)
// Settings is the variable that equals the component - in this case settings.
this.$navigateTo(Settings);
});
},
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
handleOpenURL needs to be called within Mounted - then you can parse out the appURL and reference the page (component) that you wish to navigate to. I have been advised against calling handleOpenURL from within router - but I'm not sure why, and it works without error - and I have access to the methods for routing... so if anyone knows if this is a bad idea - please let me know :) Thanks!
All the stuff below that I wrote before has probably confused things - I'm referencing components within my vuex store to make them easily available from the router.
This is based on a solution by https://github.com/Spacarar - it can be found here: https://github.com/geodav-tech/vue-nativescript-router-example. It's a great solution because you don't have to include every single component within each component to use in navigation - it gives an almost vue router like experience.
I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - however, I'm having problems opening the link.
In my app.js file, I have the following:
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
....
import { handleOpenURL } from 'nativescript-urlhandler';
import ccStore from './store/store';
handleOpenURL(function(appURL) {
// I have hardwired 'Settings' in for testing purposes - but this would be the appURL
ccStore.dispatch('openAppURL', 'Settings');
});
....
new Vue({
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
I'm storing the route state within vuex, and have various methods which work (clicking on a link loads the component). However, handleOpenURL exists outside of vue... so I've had to access vuex directly from within the handleOpenURL method. I've created an action specifically for this case - openAppURL.. it does exactly the same thing as my other methods (although I've consolidated it).
When clicking on an app link, I am NOT taken to the page within the app. I have put a console log within openAppURL and can see it is being called, and the correct route object is returned... it just doesn't open the page. The SetTimeOut is used because nextTick isn't available from within vuex.
I am at a loss on how to get the page to appear...
const ccStore = new Vuex.Store({
state: {
user: {
authToken: null,
refreshToken: null,
},
routes: [
{
name: "Home",
component: Home
},
{
name: "Log In",
component: Login
},
...
],
currentRoute: {
//INITIALIZE THIS WITH YOUR HOME PAGE
name: "Home",
component: Home //COMPONENT
},
history: [],
},
mutations: {
navigateTo(state, newRoute, options) {
state.history.push({
route: newRoute,
options
});
},
},
actions: {
openAppURL({state, commit}, routeName ) {
const URL = state.routes[state.routes.map( (route) => {
return route.name;
}).indexOf(routeName)];
return setTimeout(() => {
commit('navigateTo', URL, { animated: false, clearHistory: true });
}, 10000);
},
....
}
etc....
I have been advised to post my findings as the answer and mark it as correct. In order to use nativescript-urlhandler with vue, you must initialise the handler from within vue's mounted life cycle hook. Please see above for greater detail.
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
import Settings from "~/components/Settings";
import { handleOpenURL } from 'nativescript-urlhandler';
new Vue({
mounted() {
handleOpenURL( (appURL) => {
console.log(appURL) // here you can get your appURL path etc and map it to a component... eg path === 'Settings. In this example I've just hardwired it in.
this.$navigateTo(Settings);
});
},
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
I can use the mixin variables test and the method changeTest, when when I attribute a new value to the variable test, it's only applied in one component. How to have it changed globally, on all components using it ?
My mixins are set in the file resources/js/mixins.js:
export default {
data() {
return {
test: 'foo',
};
},
methods: {
changeTest(v) {
this.test = v;
}
}
}
Then, I have my two components comp1.vue and comp2.vue in resources/js/components/, both looking like this:
<template>
<div>
{{ test }}
</div>
</template>
<script>
import myMixins from '../mixins'
export default {
mixins: [ myMixins ],
}
</script>
Both components are in my home.blade.php like this:
#extends('layouts.app')
#section('content')
<comp1></comp1>
<comp2></comp2>
#ensection
for making a common variable (state) between all instances in vue.js you can use vuex. it's so simple, just add vuex to your packages and make an instance like this:
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
test: 'foo',
},
mutations: {
setTest(state, payload) {
state.test = payload
}
},
});
now you need to add this store to your main vue instance:
import Vue from 'vue'
Vue.use(Vuex);
let vm = new Vue({
el: '#app',
store,
// ...
});
all done. now in every component you can access the states by this.$store.state. for making life easier, you can define a computed variable like this:
computed: {
test() {
return this.$store.state.test
}
}
to change the state you just need to commit the setTest mutation. you have to add this mutation to methods and simply call it like this:
methods: {
...Vuex.mapMutations(['setTest']),
myMethod() {
// do this
this.setTest('some value');
// do that
}
}
you can also make a global mixin like i told you before to add this computed and mutation to every instance like this: (add this before make the main vue instance)
Vue.mixin({
computed: {
test() {
return this.$store.state.test
}
},
methods: {
...Vuex.mapMutations(['setTest']),
}
});
but i don't recommend to do this because when the project grow big, it gets so hard to avoid name confusion. it's better to make them separately for each component to chose proper names.
you can use mixin method on main Vue instance like this:
import Vue from 'vue'
import MyMixin from './mixins.js'
Vue.mixin(MyMixin);
It will apply this mixin for all instance no matter how deep they are.
I want to use a global eventbus to emit events from a child up to a (grand)parent.
In My main.js: I make a global eventbus available to all components.
import Vue from 'vue'
import App from './App'
const eventHub = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Vue.mixin({
data: function () {
return {
eventHub: eventHub
}
}
})
Then, in my Childcomponent.vue: I emit an event to the eventbus on a click event
<template>
<button #click="save">Save</button>
</template>
<script>
let data = {
columnName: '',
order: 0
}
export default {
...
name: 'init-column',
methods: {
save: function () {
this.eventHub.$emit('newColumn', data)
}
}
...
}
</script>
Then, in a Parentcomponent.vue I want to catch this event and do something with the data that the child had transmitted:
<template>
<div id="app">
<column v-for="column in allData"></column>
<init-column v-if="newColumn"></init-column>
</div>
</div>
</template>
<script>
import initColumn from './components/Init-column'
let newColumn = false
export default {
...
name: 'project',
ready: function () {
this.eventHub.$on('newColumn', (event) => {
console.log(event)
})
}
...
}
</script>
I'm not sure where to put the $on listener, I saw examples where they put $on in the ready hook. The code above does nothing, however I get no error in the console.
The ability to do this goes away with Vue 3. The RFC below mentions the motivation and links to some issues for further help.
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md
I don't think data is the right place for the event bus. I definitely wouldn't use a global mixin for it either.
What I've done in the past is have a simple bus.js file like:
import Vue from 'vue'
export default new Vue()
Then, in any component that needs the bus I just
import bus from './bus.js'
Then I normally do this to emit events.
bus.$emit('foo', whatever)
and this to catch them
created () {
bus.$on('foo', this.someMethod)
}
I prefer to do it in created since that's the earliest step in the lifecycle you can do this.
Also, this issue on github has some very nice examples: https://github.com/vuejs/vuejs.org/pull/435
I got the desired effect with a custom event: #newColumn="event"
<init-column #newColumn="event" v-if="newColumn"></init-column>
...
methods: { event: function(e) { console.log(e) }
So whenever I $emit from the child it does call the event method.
This works well, but for some strange reason the listener $on does not. Maybe I am missing something with the $on method.
You can put the $on listener in the created hook as specified in the docs: https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
You cannot use ready hook in Vue 2.0. ready hook was originally available in Vue 1.x, but now deprecated.