vue.jsvuejs3snowpack

Vue single file component import lifecycle hooks


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.


Solution

  • 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