[Vue] Vue guide should use Composition API

[chrisdavidmills]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

I tried to provide a review for https://github.com/mdn/content/pull/35676 (I later noticed @bsmth had been assigned as the reviewer, so I stopped), but I came up against several errors that were quick tricky to debug. I gave up after a while because it was taking too much of my time.

First of all, the default generated App.vue component uses this new <script setup> feature, which seems to be no longer require the export statements, and gives an error if you include them. I read https://vuejs.org/guide/components/registration.html, which helped me figure it out.

Second, I could not get my props to work, either with the <script set> route, or with the older <script> route that requires the export statements. I have got them registered in App.vue and included in my template:

<script>
import ToDoItem from "./components/ToDoItem.vue";

export default {
  name: "app",
  components: {
    ToDoItem,
  },
  props: {
    label: {
      required: true,
      type: String
    },
    done: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      isDone: this.done,
      id: "todo-" + crypto.randomUUID(),
    };
  }
};
</script>

<template>
  <div id="app">
    <h1>To-Do List</h1>
    <ul>
      <li>
        <to-do-item label="My ToDo Item" :done="true"></to-do-item>
      </li>
    </ul>
  </div>
</template>

And I have got them included in my ToDoItem.vue template:

<template>
  <div>
    <input type="checkbox" :id="id" :checked="isDone" />
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {};
</script>

But I still get a todo item rendered showing no label, and and errors as follows:

[Vue warn]: Missing required prop: "label" 
  at <App> [runtime-core.esm-bundler.js:51:12](http://localhost:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Property "id" was accessed during render but is not defined on instance. 
  at <ToDoItem label="My ToDo Item" done=true > 
  at <App> [runtime-core.esm-bundler.js:51:12](http://localhost:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Property "isDone" was accessed during render but is not defined on instance. 
  at <ToDoItem label="My ToDo Item" done=true > 
  at <App> [runtime-core.esm-bundler.js:51:12](http://localhost:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Property "id" was accessed during render but is not defined on instance. 
  at <ToDoItem label="My ToDo Item" done=true > 
  at <App> [runtime-core.esm-bundler.js:51:12](http://localhost:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Property "label" was accessed during render but is not defined on instance. 
  at <ToDoItem label="My ToDo Item" done=true > 
  at <App> [runtime-core.esm-bundler.js:51:12](http://localhost:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)

I am not sure what I've missed. I never had this much trouble setting up this app when I worked on the original view guide!

What did you expect to see?

A working app

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

[Josh-Cena]

@chrisdavidmills Our guide is not using the Vue 3 Composition API; it's using the old (soft-deprecated) Options API and that needs updating for sure. However this was just audited in https://github.com/mdn/content/pull/33167 so I believe it should at least work. In particular, it doesn't look like you actually set anything up in ToDoItem.vue as you are exporting an empty object—you need to define props and data in there, no?

[chrisdavidmills]

Thanks for your help, @Josh-Cena! Yup, in my speed of rushing through the tutorial to try and test the PR content, I misread it and added the props and data to the App component, not the TodoItem component.

I've updated it today, and it now works, so all good.

I'm going to leave this open for now, as I think something still needs to be done at least in the short term to tell the reader to update <script setup> to <script> in their generated components. This had me stumped for a while yesterday.

[Josh-Cena]

I'm repurposing this issue to upgrade us to Composition API. If someone sends a PR saying "you should remove setup" in the interim that would be great too.