Using Nuxt with Typescript, I have created a custom component as shown below:
<template>
<div class="field">
<label class="label" v-if="typeof label !== 'undefined'">{{ label }}</label>
<div class="control">
<textarea
v-if="inputType === 'textarea'"
class="textarea"
@input="$emit('input', $event.target.value)"
></textarea>
<input
v-if="inputType === 'input'"
:type="type"
class="input"
@input="$emit('input', $event.target.value)"
>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"
@Component({})
export default class AppInput extends Vue {
@Prop({ type: String, required: false, default: "input" })
inputType!: string
@Prop({ type: String, required: false })
label!: string
@Prop({ type: String, required: false, default: "text" })
type!: string
}
</script>
<style>
</style>
In my @/plugins/components.ts file, I imported the component like this:
import Vue from "vue"
import AppInput from "@/components/Forms/AppInput.vue"
Vue.component("AppInput", AppInput)
However, upon compiling the project with Nuxt, an error stating
export 'default' (imported as 'mod') was not found