I'm not sure what happened during the updates that I've made but I've now received an error that I did not get previously. I've got a section of code in my pages folder under index.vue:
<section class="intro">
<h1>heading 1</h1>
<h2>heading 2</h2>
<nuxt-link to="/admin">
<AppButton
type="submit"
@click="onSave">
Start Here
</AppButton>
</nuxt-link>
<nuxt-link to="/connect">
<AppButton
type="submit"
@click="onSave">
Contact Us
</AppButton>
</nuxt-link>
</section>
<script>
import AppButton from '@/components/UI/AppButton'
export default {
components: {
AppButton
}
}
</script>
And this section of code under the default.vue file in layouts:
<template>
<div>
<TheHeader @sidenavToggle="displaySidenav = !displaySideNav" />
<Nuxt />
<TheFooter />
</div>
</template>
<script>
import TheHeader from '@/components/Navigation/TheHeader'
import TheFooter from '@/components/Navigation/TheFooter'
export default {
components: {
TheHeader,
TheFooter
}
}
</script>
I also have this code under the AppButton.vue file located under components:
<template>
<button
class="button"
:class="btnStyle"
v-bind="$attrs"
v-on="$listeners">
<slot />
</button>
</template>
<script>
export default {
name: 'AppButton',
props: {
btnStyle: {
type: String,
default: ''
}
}
}
</script>
The error states: "[Vue warn]: Property or method "onSave" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property." I have not had this issue before and do not know why it is appearing now. Has something changed in Vue and nuxt.js?