Is this instance lifecycle hooks diagram also valid(the same) for a vue.js single file component or a global component(vue.componnet())? or is it only used for a Vue instance(new Vue)??
thanks.
Yes, these lifecycle hooks are there for all vue instances: SFCs, global components, explicit new Vue, vue-test-utils wrappers, and so on.
The only thing that SFC do are to write the .render method for you because it's way simpler to write it with an html-like syntax rather than write the render function manually.
In an SFC, you'd tap into them as such:
<script>
export default {
created() {
// do something on created
}
}
</script>
In an explicit new Vue, like this:
new Vue({
created() {
// do something on created
}
});
You get the point.
Related
Could you advise what is the equivalent of the created() in the new Vue composition API, which I'm using from within Vue2 like this:
import { reactive, toRefs } from '#vue/composition-api'
From the Composition API docs on Lifecycle Hooks:
Because setup is run around the beforeCreate and created lifecycle hooks, you do not need to explicitly define them. In other words, any code that would be written inside those hooks should be written directly in the setup function.
Anything you would have done in the created hook you can do in setup.
to help the community, the created() method can be used this way.
hope this helps :)
<script>
import TenantsAPI from "#/api/tenants";
export default {
setup() {
const tenantsAPI = new TenantsAPI(); //compositon api
};
}
//options api
//async created(){
// this.tenantsAPI = new TenantsAPI();
//}
</script>
I'm building server UI and I'm struggling with components. Maybe someone knows how to stack all components and control all UI with functions?
example
App.vue
chat.vue
hud.vue
player.vue
I need to display all .vue in app.vue
App.vue
import chat from './components/chat.vue'
export default {
name: 'app',
components: {
chat
}
}
chat.vue
export default {
methods: {
test: function() {
console.log("test");
}
}
}
How can I call the function test in the DevTools console, when I run the webiste?
Do you know about the Vue Dev Tools browser extension? That will let you inspect all components on a page and tweak their data/props.
I don't think it will let you call their methods, but if you need to call one of those methods in the console you might try (temporarily, for testing purposes) making a component instance available on the window inside a mounted lifecycle function.
EDIT: Is that your entire App.vue, by the way? I'm thinking maybe I misunderstood your question and you think that...
components: {
chat
}
...means that it should render the component on the page. It only makes it available for the parent component to use. You have to place it inside a <template> to actually render it.
Usually I use a js code with functions to run on some events.
Now I am using nuxt.js and I wonder where to put this file or how to create a global method to use these functions in every component.
I could write the methods that I need inside every a specific component but after it wouldn't be usable outsite of it.
How to do that in vue/nuxt?
So one way to do it in vue.js is by using mixins, in nuxt you can also use mixins, then you should register them as plugins, but first:
Non global mixins
Create an extra folder for your mixins. For example in a /mixins/myMixin.js
export default {
methods: {
commonMethod() {
console.log('Hello')
}
}
}
Then import in a layout, page or component and add it via the mixins object:
<script>
import myMixin from '~/mixins/myMixin.js'
export default {
mixins: [myMixin]
}
</script>
Global mixins
For example in a new file plugins/mixinCommon.js:
import Vue from 'vue'
Vue.mixin({
methods: {
commonMethod() {}
}
})
Include the file in nuxt.config.js like that:
plugins: ['~/plugins/mixinCommon']
After that you would have the method everywhere available and call it there with this.commonMethod(). But here an advice from the vue.js docs:
Use global mixins sparsely and carefully, because it affects every
single Vue instance created, including third party components. In most
cases, you should only use it for custom option handling like
demonstrated in the example above. It’s also a good idea to ship them
as Plugins to avoid duplicate application.
I am trying to create some plugins according to this article:
https://alligator.io/vuejs/creating-custom-plugins/
I have a plugin that needs to run something when the root Vue instance mounts or is created. So far I can only see a way to inject something into all components which is not what I would want.
I simply need to do something when the main Vue instance mounts. How can I do this with a plugin?
The install method from the plugin does not seem to do the trick because this seems to happen before the actual created method.
It's possible to have multiple root Vue components. A "root component" is just a component created with the new syntax and no parent component, so you can detect this as follows:
Vue.mixin({
created() {
if (!this.$parent) {
// This is either the root component or a component
// created with `new` and no parent
}
}
})
It's actually easy to include mixins for just a particular component!
In your component that you want to add the mixin to, just import it like you would anything else, and include an array in your component called mixins like so:
import myMixin from 'src/mixin/myMixin'
export default {
mixins: [myMixin]
}
Then your myMixin code would look like this (don't use Vue.mixin, which is global):
export default {
beforeMount () {
console.log('Your component is about to be mounted!')
}
}
I'm creating a plugin and I just wonder why I can't access it in main.js file. Here's how Auth.js looks like:
const Auth = {
install(Vue) {
Vue.prototype.$isGuest = function () {
console.log('This user is a guest.');
}
Vue.prototype.$getAuthToken = function () {
console.log('Auth token will be returned.');
}
}
}
export default Auth
This is main.js:
import Auth from '#/helper/Auth'
Vue.use(Auth)
However, when I execute console.log(this.$isGuest()), it doesn't work. It actually returns the following:
main.js?1c90:25 Uncaught TypeError: this.$isGuest is not a function
The problem is that this method works when I call it in components such as Dashboard.vue and things like that.
I have a way to avoid calling isGuest method within main.js (I can call it in Layout.vue), but I'm more curious why it doesn't work in main.js.
Maybe because Vue hasn't been initialized yet, but even if I put the console.log() line at the end of the file, still doesn't work.
Thanks,
N.
If you are calling this.$isGuest() outside of Vue, you will get the error you describe. That's because this is not a Vue object. What this is depends on how you are building your code, but given you are using import it's probably the module.
Also, you are adding $isGuest to the prototype of Vue. That means that the function is only going to be available on actual instances of Vue objects. That is why it is available in your components.
If you want to use it in the main script, the only place you will be able to get to it is inside the Vue object in a lifecycle handler, method, or computed. For example:
new Vue({
mounted(){
console.log(this.$isGuest()) // this should work
}
})