I am kind of revising and trying VUE 3 I created a Task Tracker application. The problem is when I try to add a footer, it does not work and give me the following problems :
Also, it worth mention that I tried to add Vue-router before adding the Footer. So I removed Vue-router settings and files but still the same error and warning
Error : Uncaught (in promise) RangeError: Maximum call stack size exceeded
Warning : runtime-core.esm-bundler.js?5c40:6568 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <Footer>
at <Footer>
at <Footer>
at <Footer>
at <Footer>
and so on for a long line
Error: Uncaught (in promise) RangeError: Maximum call stack size exceeded
and here is my full code repo : https://github.com/Ahmed-Elbessfy/vue-task-tracker-issue
You are calling the Footer component inside the Footer component:
src/components/Footer.vue
<template>
<Footer>
...
use the built-in HTML <footer> element instead (lower case f)
As @tauzN points, you're creating an infinite loop by calling the component Footer inside Footer.
You should use a multi-word name approach for your components:
This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
You can read more at https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential