Vue single file component import lifecycle hooks

Question

I need help with the setup of my Vue application (I am just learning vue).

I read in the tutorials that to get access to a lifecycle hook I would need to do something like this:

<template>
  <h4>Sports</h4>
  <li v-for="sport in sports" v-bind:key="sport.id">
    {{ sport.name }}
  </li>
</template>

<script lang="ts">
import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("component mounted");
    });
  },
  data() {
    return {
      sports: [],
    };
  },
};
</script>

However, VSCode's intellisense doesn't recognize onMounted as an exported function from vue. When I run my code in snowpack it still doesn't recognize the function.

Are you using `vue 3`? Installed with `npm install vue@next`. — Matt, Nov 09 '20 at 22:38

score 1 · Accepted Answer · answered Nov 10 '20 at 17:49

I think the issue is likely due to lang="ts"

You could try having the js in a separate file and referencing it with <script lang="ts" src="./myComponent.ts"> and then have the typescript in there.

Here is some documentation someone came up with regarding, what seems to be, the same/related issue.

https://github.com/patarapolw/vue-typescript-suggestions

score 1 · Answer 2 · answered Nov 10 '20 at 18:04

You don't need to import them, they are already available:

<template>
  <h4>Sports</h4>
  <li v-for="sport in sports" v-bind:key="sport.id">
    {{ sport.name }}
  </li>
</template>

<script>
export default {
  data() {
    return {
      sports: [],
    };
  },
  mounted() {
      console.log("component mounted");
  };
};
</script>

Also, unless you specifically want to use typescript, then leave off lang="ts" in the script tag.

Vue single file component import lifecycle hooks

2 Answers2