@Component decorator requires `template` key

[jklmli]

From the screenshot on your main page: it looks like using the @Component decorator and the ambient template in the same file should work.

I tried this with ts-loader, and it failed with the error:

[Vue warn]: Failed to mount component: template or render function not defined.

Is this something that's only supported in vue-ts-loader?

[HerringtonDarkholme]

Are you using .vue single file component? @Component without template requires vue-loader and ts-loader to inject render function into your component.

[jklmli]

Thanks for responding so quickly! Yes, I'm using single file components, with both vue-loader and ts-loader. My codebase also has non single file components - I'm supporting both.

Here's a slice of my webpack config:

const config = {
  ...
  module: {
    rules: [{
      test: /\.ts$/,
      exclude: /node_modules/,
      loader: 'tslint-loader',
      enforce: 'pre',
      options: {
        configFile: 'ts.tslint.json',
        formatter: 'verbose',
        typeCheck: true
      }
    }, {
      test: /\.ts$/,
      loader: 'ts-loader',
      options: {
        // :LINK: https://github.com/TypeStrong/ts-loader#appendtssuffixto-regexp-default
        appendTsSuffixTo: [/\.vue$/]
      }
    }, {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          scss: scssUseConfig,
          ts: [{
            loader: 'ts-loader',
            options: {
              // :LINK: https://github.com/TypeStrong/ts-loader#appendtssuffixto-regexp-default
              appendTsSuffixTo: [/\.vue$/]
            }
          }, {
            loader: 'tslint-loader',
            options: {
              configFile: 'vue.tslint.json',
              formatter: 'verbose'
            }
          }]
        }
      }
    }]
  },
  ...
};

EDIT: I thought I found the problem, updated the config but still no dice 😞

[jklmli]

Figured it out....vue files / vue-loader don't allow named exports, you have to use a default export. Sorry to take up your time 😅