CODEWITHSUNDEEP
typescriptvue.js
user2543127
user2543127

Reputation: 415

write Vue Js component data, methods, props in separate Typescript files

I use Vue JS 2 and typescript for my project. I want to import data.ts, methods.ts, props.ts in my customComponent.vue:

<!-- ////////////////////////////////////////////////////////////////////// -->
<script lang="ts">
import Vue from "vue";

import data                  from './data'
import props                 from './props'
import methods               from './methods'
import { created, mounted }  from './vue-hooks'

export default Vue.extend({
  name: "custom-component"
});
</script>

How can write these typescript files in order to be imported correctly in the Vue custom component?

Upvotes: 0

Views: 168

Answers (1)

Radu Diță
Radu Diță

Reputation: 14211

You should be able to just move the code from the component to each different file and export them as default.

An example for data below:

// data.ts
const data = function() {
   return {
     //data here
   }
}
export default data

And then use it in the component

export default Vue.extend({
  name: "custom-component",
  data
});

But I would strongly discourage this. You should split your code based on concerns not on structure of the objects. Navigating between all this components for the simplest of tasks will be a great pain.

Upvotes: 1

Related Questions