Nuxt.js: 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: [] });
        }
      });
    },
  });
};