How to solve Nuxt + TypeScript problem?

Question

typescript

How to solve the problem with axios correctly?

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      form: {
        customer_name: '',
        customer_phone: '',
        customer_message: '',
      },
    }
  },
  methods: {
    sendOrder() {
      this.$axios
        .$post('/v1/order', this.form)
        .then((response) => {
          if (response.error) {
            this.$swal({
              icon: 'error',
              title: response.message,
              timerProgressBar: true,
            })
          }
        })
        .catch((error) => {
          this.$swal({
            icon: 'error',
            title: Object.values(error.response.data.errors).flat().join(''),
            timerProgressBar: true,
          })
        })
    },
  },
})
</script>

issues

Property '$axios' does not exist on type 'CombinedVueInstance<Vue, { form: { customer_name: string; customer_phone: string; customer_message: string; }; page: { title: string; description: string; }; }, { sendOrder(): any; }, unknown, Readonly<Record<never, any>>>'.

Answer 1

https://github.com/nuxt/typescript/issues/335#issu...
needs to be added to tsconfig.json @nuxt/types

{
  "compilerOptions": {
    ...
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  ...
}

Answer 2

You need to extend the Vue, Vuex, Nuxt type (depending on where you use this.$axios)
There are examples of how to do this https://typescript.nuxtjs.org/cookbook/plugins