Как решить проблему Nuxt + TypeScript?

Question

[Максим]

Как правильно решить проблему с axios?

<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>

выдает

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

[eternalfire]

https://github.com/nuxt/typescript/issues/335#issu...

нужно добавить в tsconfig.json @nuxt/types

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

Comments

[Максим]

стоит

[Максим]

но все ровно выдает

Answer 2

[Константин Величко]

Вам нужно расширить тип Vue, Vuex, Nuxt (смотря где будете использовать this.$axios)
Тут есть примеры как это делать https://typescript.nuxtjs.org/cookbook/plugins