CODEWITHSUNDEEP
typescriptvue.jsvue-component
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 923

Vue&TypeScript: 'el' property for vue-property-decorator/vue-class-component?

Let this question will be laconic. Which equivalent for the below code will be for TypeScript & Vue && vue-property-decorator combination?

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Upvotes: 0

Views: 518

Answers (1)

tony19
tony19

Reputation: 138226

vue-property-decorator is intended to augment Vue components with class-style syntax in TypeScript. The code in question does not fit the criteria because it's not a component. Let's assume you meant to convert the script in this single-file-component:

App.vue:

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

The conversion with vue-property-decorator would look like this:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  message = 'Hello Vue!'
}
</script>

Mounting the root remains the same (vue-property-decorator would not be used):

<!-- index.html -->
<body>
  <div id="app"></div>

  <script>
    new Vue({
      el: '#app'
    });
  </script>
</body>

I recommend generating a TypeScript project with vue-cli (select the TypeScript preset and "class-style syntax" at the prompts).

Upvotes: 2

Related Questions