Allow checking if current component is page

[p1pchenk0]

What problem does this feature solve?

During work on application we faced a need to use mixin for pages only. Right now we have two options:

1. check page inside mixnin const isPage = this.$options.name && this.$options.name.toLowerCase().endsWith('page'), but this is very fragile
2. manually include required mixin everytime we create new page

What does the proposed changes look like?

As an example it would be nice to have this.$options.isPage boolean

_{This feature request is available on Nuxt community (#c8680)}

[p1pchenk0]

Ok, found a property $metaInfo. Is it only for pages?

Update: nope

Maybe, there is a way to add such property to page component during build?

[atinux]

I would suggest to use directly a PageComponent that you create with the mixin inside and use it into your pages directly:

import PageComponent from '~/components/Page.vue'

export default PageComponent.extend({
  // asyncData
  // ...
})

This will avoid to have any kind of global Mixin that has an impact on performances.

What is your mixin exactly and what are you trying to achieve with it that you can't do with another way?

This way we will be able to find the best solution :-)

[p1pchenk0]

@Atinux so, do I need to extend each page I have in my project?

[p1pchenk0]

@Atinux what I am trying to achieve is to add schema.org markup to each page using head () function in mixin

[felixbuenemann]

I think an option to inject a mixin only into page components would be great, because it allows to keep .vue pages without script blocks.

[victorgarciaesgi]

Is there any update on this?

[victorgarciaesgi]

For those who are come across on this issue and having the problem, I found a workaround because I wanted to create a global breadcrumb mixin. This solution is working(using beforeRouteEnter):

const installPlugin: PluginFunction<any> = (Vue) => {
  Vue.mixin({
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        const options = vm.$options;
        const breadcrumb = options.breadcrumb;
        if (breadcrumb != null && typeof breadcrumb === 'function' && vm.$store != null) {
          const list = breadcrumb.call(vm);
          BreadCrumbModule.helpers.updateState({ list });
        } else if (vm.$store != null && BreadCrumbModule.state.list.length > 0) {
          BreadCrumbModule.helpers.updateState({ list: [] });
        }
      });
    },
  });
};

[baixiaoyu2997]

mixin beforeRouteEnter it won't work in SSR first page, this my solution,in every page ,configer meta options to mark this is page for beforeCreate mixin

// some page
export default {
  name: 'HashRate',
  meta: {
    showNavBar: false,
    showTabBar: true,
    isPage:true
  },
}

// mixins plugin
export default function ({ store, route, app }) {
  if (!Vue.__my_mixin__) {
    Vue.__my_mixin__ = true
    const pageTitle = {
      beforeCreate() {
        if (this.$options?.meta?.isPage) {
          const pageTitle =
            app.i18n.t(this.$options.pageTitle) 
          store.commit('setState', { pageTitle })
        }
      },
    }
    Vue.mixin(pageTitle)
  }
}

[guidomodarelli]

this.$vnode?.data.nuxtChild

[danielroe]

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. I'm closing this issue as it's marked as a Nuxt 2 related enhancement and it's not a critical issue.

That doesn't mean it might not be relevant for Nuxt 3. If it is, please feel free to open a new issue (or just comment, and I can reopen it). 🙏

Thank you for your understanding and for your contribution to Nuxt! 🎉