How to access the app object from a Vue single file component?

Question

My end goal: I'm using a custom HTML element in a component template (<gcse:searchresults-only>) and I'd like to register the element with Vue. The method given by that page for registering custom elements is through app.config.compilerOptions.isCustomElement.

But I'm using a single file component and the global app object is not defined. Is there a way to obtain it? Or is there an alternative way to set config options from within a single file component?

Do I need to set it from outside this component? I figured that since I'm only using this custom element here, it makes sense for only this file to have to know about it instead of managing it in some global context.

In case it matters, I'm actually doing this within Gridsome.

Tallboy · Accepted Answer · 2021-08-27 20:56:48Z

2

This is how we do it (like in the docs). I think it's fine to make it globally available as it will also have a bunch of ESLint warnings, etc

vue.config.js

module.exports = {
  chainWebpack: config => {
    // ignore errors about external custom html elements
    config.module.rule('vue').use('vue-loader').tap(options => ({
      ...options,
      compilerOptions: {
        isCustomElement: tag => tag === 'gcse:searchresults-only',
      },
    }));
  },
};

answered Aug 27, 2021 at 20:56

Tallboy

13.5k13 gold badges96 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access the app object from a Vue single file component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related