Vue's Global mixins causing repetitive fires

Question

Vue's Global mixins causing repetitive fires

In an effort to modify page titles, I have developed a mixin using document.title and global mixins.

The contents of my mixin file (title.ts) are as follows:

import { Vue, Component } from 'vue-property-decorator'

function getTitle(vm: any): string {
  const title: string = vm.title
  if (title) {
    return `${title} | site.com`
  }
  return 'Admin panel | site.com'
}

@Component
export default class TitleMixin extends Vue {
  public created(): void {
    const title: string = getTitle(this)
    if (title) {
      document.title = title
    }
  }
}

Next, I registered this mixin globally in main.ts:

import titleMixin from '@/mixins/title'
Vue.mixin(titleMixin)

To set up the title in a specific Vue component, follow these steps:

@Component
export default class Login extends Vue {
  public title: string = 'New title'
}

My project consists of approximately 5 components. By utilizing console.log within the mixin, I can observe that it is invoked in each component sequentially, eventually setting the document.title based on the last component's created() hook.

Is there a more proper way to establish the title for the CURRENT page?

javascript typescript vue.js

Answer 1

Answer №1

Just like you mentioned, implementing a global mixin will impact all components within your Vue application. This means that the code to update the document.title will execute in the created hook of every component throughout your app.

If you are seeking a more targeted approach, you might want to consider utilizing VueRouter's beforeRouteEnter hook. This particular hook is part of the navigation guards provided by VueRouter and allows you to execute logic just before transitioning to a specified route.

To achieve this specific functionality, your implementation could resemble the following:

@Component
export default class TitleMixin extends Vue {
  public beforeRouteEnter(to, from, next): void {
    next(vm => {
      const title: string = getTitle(vm)
      if (title) {
        document.title = title
      }
    })
  }
}

In the above code snippet, note that we are passing a callback function to the next method, which includes a reference to the component's instance (vm). We then utilize this reference within the getTitle function instead of using this, as the beforeRouteEnter hook does not have direct access to this. For further insights, feel free to explore the documentation link provided.

Answer 2

Just like you mentioned, implementing a global mixin will impact all components within your Vue application. This means that the code to update the document.title will execute in the created hook of every component throughout your app.

If you are seeking a more targeted approach, you might want to consider utilizing VueRouter's beforeRouteEnter hook. This particular hook is part of the navigation guards provided by VueRouter and allows you to execute logic just before transitioning to a specified route.

To achieve this specific functionality, your implementation could resemble the following:

@Component
export default class TitleMixin extends Vue {
  public beforeRouteEnter(to, from, next): void {
    next(vm => {
      const title: string = getTitle(vm)
      if (title) {
        document.title = title
      }
    })
  }
}

In the above code snippet, note that we are passing a callback function to the next method, which includes a reference to the component's instance (vm). We then utilize this reference within the getTitle function instead of using this, as the beforeRouteEnter hook does not have direct access to this. For further insights, feel free to explore the documentation link provided.

Answer 3

Answer №2

Instead of relying on a global mixin, consider utilizing the power of a route meta field in conjunction with a global resolve guard.

To implement this approach, begin by setting up a meta field for each RouteConfig object within the /router/routes.ts file:

import { RouteConfig } from 'vue-router'

export default [
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: 'login-view' */ '@views/Login.vue'),
    meta: {
      title: 'Login', // Define the view title
    },
  },
  // ... Add the title meta field to every `RouteConfig`
] as RouteConfig[]

Next, establish a global resolve guard that updates the document title based on the title meta field, located in the /router/index.ts file:

import Vue from 'vue'
import Router, { Route } from 'vue-router'
import routes from './routes'

Vue.use(Router)

const router = new Router({
  // ... Specify RouterOptions
})

// Before resolving each route...
// Resolve guards are invoked just before confirming navigation,
// following resolution of all in-component guards and async route components.
router.beforeResolve((routeTo, routeFrom, next) => {

  const documentTitle = getRouteTitle(routeTo)

  // If the target `Route` has a meta property with a defined title meta field,
  // update the document title accordingly
  if (documentTitle ) {
    document.title = documentTitle 
  }

  // Proceed with navigation by calling `next`...
  next()

  function getRouteTitle(route: Route): string {
    const title: string = route.meta && route.meta.title
    if (title) {
      return `${title} | site.com`
    }
    return 'Admin panel | site.com'
  }
})

export default router

Answer 4

Instead of relying on a global mixin, consider utilizing the power of a route meta field in conjunction with a global resolve guard.

To implement this approach, begin by setting up a meta field for each RouteConfig object within the /router/routes.ts file:

import { RouteConfig } from 'vue-router'

export default [
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: 'login-view' */ '@views/Login.vue'),
    meta: {
      title: 'Login', // Define the view title
    },
  },
  // ... Add the title meta field to every `RouteConfig`
] as RouteConfig[]

Next, establish a global resolve guard that updates the document title based on the title meta field, located in the /router/index.ts file:

import Vue from 'vue'
import Router, { Route } from 'vue-router'
import routes from './routes'

Vue.use(Router)

const router = new Router({
  // ... Specify RouterOptions
})

// Before resolving each route...
// Resolve guards are invoked just before confirming navigation,
// following resolution of all in-component guards and async route components.
router.beforeResolve((routeTo, routeFrom, next) => {

  const documentTitle = getRouteTitle(routeTo)

  // If the target `Route` has a meta property with a defined title meta field,
  // update the document title accordingly
  if (documentTitle ) {
    document.title = documentTitle 
  }

  // Proceed with navigation by calling `next`...
  next()

  function getRouteTitle(route: Route): string {
    const title: string = route.meta && route.meta.title
    if (title) {
      return `${title} | site.com`
    }
    return 'Admin panel | site.com'
  }
})

export default router

Answer 5

Answer №3

To ensure proper usage, the mixin should only be applied in the parent component of your webpage (the one governing the entire page).

When utilizing vue-property-decorator, follow this format:

import { Vue, Component, Mixins } from 'vue-property-decorator';

@Component
export default class Login extends Mixins(titleMixin) {
  public title: string = 'New title'
}

Avoid globally importing it using Vue.mixin(titleMixin). This will apply the mixin to all components throughout your project.

Answer 6

To ensure proper usage, the mixin should only be applied in the parent component of your webpage (the one governing the entire page).

When utilizing vue-property-decorator, follow this format:

import { Vue, Component, Mixins } from 'vue-property-decorator';

@Component
export default class Login extends Mixins(titleMixin) {
  public title: string = 'New title'
}

Avoid globally importing it using Vue.mixin(titleMixin). This will apply the mixin to all components throughout your project.

Vue's Global mixins causing repetitive fires

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an error when using Angular Material virtual scroll in conjunction with Angular-UI

Navigating after submitting a form using the Location header in jQuery

Having trouble establishing a connection between VueJS 3 and Socket.io

Using JSON data in an ArrayBuffer with TypeScript

Is there a way to append a URL parameter after a link is clicked using Vue.js?

"Error encountered: Unable to resolve dependency tree" message appears when attempting to run npm install

What are the steps to effectively utilize npm warnings within tslint?

Troubleshooting issues with the delete functionality in a NodeJS CRUD API

Can we create a collection of Vue highcharts components in a library format?

The powerful combination of harp.gl and Angular NG

Executing JavaScript code within ASP.NET Visual Basic

Automatic popup updates when submitting a form in a Chrome extension

Can PHP's CURL handle cookies?

Encountering a 404 error indicating that the file cannot be found while attempting to log into an authentication system developed using express and node

What steps should I take to resolve the 'buffer' issue in my jsonwebtoken?

Avoid changing the regex pattern if it is surrounded by a specific character

I encountered an error while using the router: TypeError: Cannot read property 'use' of undefined

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Having trouble with passing props to data() in Vue.js?

Utilizing the indexOf Method in AngularJS