Skip to content

vue/ts - separation of concerns (vue-cli 3 beta 15) #1576

Closed
@bc3

Description

@bc3

Version

3.0.0-beta.15

Reproduction link

https://codesandbox.io/s/j1wvnyn68w

Steps to reproduce

setup a new cli project using beta 15 & ui

add Test.vue

<template>
  <div>
      <p>TEST</p>
  </div>
</template>
<script lang="ts">
export { default } from './Test';
</script>

add Test.ts

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
@Component({
    name: 'test',
    components: {

    },
})
export default class Test extends Vue {
}

and in the router change the home route to this test component or add another router

e.g. your app.ts

<template>
  <div id="app">
    <test/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import * as Test from '@/components/Test.vue';

@Component({
  components: {
    Test,
  },
})
export default class App extends Vue {}
</script>

What is expected?

that the page is rendered and test is displayed

What is actually happening?

componentNormalizer.js?2877:24 Uncaught TypeError: Cannot set property 'render' of undefined
at normalizeComponent (componentNormalizer.js?2877:24)
at eval (Test.vue?2500:8)
at Module../src/components/Test.vue (app.js:3768)
at webpack_require (app.js:722)
at fn (app.js:99)
at eval (index.ts:6)
at Module../src/router/index.ts (app.js:3816)
at webpack_require (app.js:722)
at fn (app.js:99)
at eval (main.ts:6)


when using the ts code inside the vue file it works as expected, but i want to have a split vue and ts file

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions