Vue Class Component Options

Posted on  by admin

# Manual Setup

# Vue CLI Setup

  • Modified10 months ago. Currently I use Vue 2 with Typescript, but I can't add options to the component.
  • I got undefined! I found 1 problem similar to this, I tried but still no result. My src\shims-vue.d.ts.

203203 bronze badges. Your type declaration is missing an import for Vue:.

To access the option from your component, use this.$options.middleware (not this.middleware):. 1414 gold badges145145 silver badges203203 bronze badges.

203203 bronze badges. You can easily setup your Vue Class Component project by using Vue CLI. Run the following command to create a new project:. You will be asked whether using preset or not. Select "Manually select features":.

Check TypeScript feature to use Vue Class Component. You can add other features in addition if you need:. Press y for the question Use class-style component syntax?:. You can answer the remaining questions as your preferences.

After finishing this setup process, Vue CLI creates a new project directory with Vue Class Component installed. If you prefer manual setup, install it via npm and configure your build tool. You can install Vue Class Component with npm command.

Please make sure to also install Vue core library as Vue Class Component depends on it:. You can use yarn command if you prefer:. To use Vue Class Component, you need to configure TypeScript or Babel in your project as it relies on ECMAScript stage 1 decorators which is needed to transpile to run on browsers.

# Different Builds

  • It does not support the stage 2 decorators yet since TypeScript transpiler still only supports the old decorators spec.

Create tsconfig.json on your project root and specify experimentalDecorators option so that it transpiles decorator syntax:. Install @babel/plugin-proposal-decorators and @babel/plugin-proposal-class-properties:.

Then configure .babelrc on your project root:.

Note that legacy and loose option are needed as Vue Class Component only supports stage 1 (legacy) decorator spec yet. provides npm-based CDN links. You can choose specific version of Vue Class Component by replacing the @latest part in url (e.g.[email protected]/dist/vue-class-component.js to use version 7.2.2).

Vue Class Component is provided as different builds for different environments and usages. For developmentvue-class-component.js (UMD)vue-class-component.common.js (CommonJS)vue-class-component.esm.js (ES Module for bundlers)vue-class-component.esm.browser.js (ES Module for browsers).

vue-class-component.js (UMD). vue-class-component.common.js (CommonJS).

# npm

vue-class-component.esm.js (ES Module for bundlers). vue-class-component.esm.browser.js (ES Module for browsers). For production (minified)vue-class-component.min.js (UMD)vue-class-component.esm.browser.min.js (ES Module for browsers).

  1. vue-class-component.min.js (UMD).

  2. vue-class-component.esm.browser.min.js (ES Module for browsers).

This means a param attribute data-hello will be set on the vm as vm.hello; And my-param will be set as vm.myParam.


  • Type:Object

Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the Vue instance.


# Build Setup

  • Type:Object

Computed properties to be mixed into the Vue instance. All getters and setters have their this context automatically bound to the Vue instance.




  • Type:String | HTMLElement | Function
  • Restriction: only accepts type Function when used in Vue.extend().

Provide the Vue instance with an existing DOM element. It can be a CSS selector string, an actual HTMLElement, or a function that returns an HTMLElement. Note that the provided element merely serves as a mounting point; it will be replaced if a template is also provided, unless replace is set to false. The resolved element will be accessible as vm.$el.

When used in Vue.extend, a function must be provided so each instance gets a separately created element.

If the option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call vm.$mount() to manually start the compilation.


  • Type:String

A string template to be used as the markup for the Vue instance. By default, the template will replace the mounted element. When the replace option is set to false, the template will be inserted into the mounted element instead. In both cases, any existing markup inside the mounted element will be ignored, unless content insertion points are present in the template.

If the string starts with # it will be used as a querySelector and use the selected element’s innerHTML as the template string. This allows the use of the common