diff --git a/.vscode/project-words.txt b/.vscode/project-words.txt
index b8d9554c7fa11c0..9d083c5af289fd8 100644
--- a/.vscode/project-words.txt
+++ b/.vscode/project-words.txt
@@ -58,6 +58,7 @@ okan
 Oklab
 oklch
 Paciello
+Pinia
 prophoto
 rgba
 ripgrep
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index 8890e0554b5f96f..75ad85375f9deba 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -307,26 +307,26 @@ Try changing `true` to `false` and back again, reloading your app in between to
 
 Great! We now have a working checkbox where we can set the state programmatically. However, we can currently only add one `ToDoList` component to the page because the `id` is hardcoded. This would result in errors with assistive technology since the `id` is needed to correctly map labels to their checkboxes. To fix this, we can programmatically set the `id` in the component data.
 
-We can use the [lodash](https://www.npmjs.com/package/lodash) package's `uniqueid()` method to help keep the index unique. This package exports a function that takes in a string and appends a unique integer to the end of the prefix. This will be sufficient for keeping component `id`s unique.
+We can use the [nanoid](https://github.com/ai/nanoid) package to help keep the index unique. This package exports a function `nanoid()` that generates a unique string. This will be sufficient for keeping component `id`s unique.
 
 Let's add the package to our project with npm; stop your server and enter the following command into your terminal:
 
 ```bash
-npm install --save lodash.uniqueid
+npm install --save nanoid
 ```
 
-> **Note:** If you prefer yarn, you could instead use `yarn add lodash.uniqueid`.
+> **Note:** If you prefer yarn, you could instead use `yarn add nanoid`.
 
 We can now import this package into our `ToDoItem` component. Add the following line at the top of `ToDoItem.vue`'s `<script>` element:
 
 ```js
-import uniqueId from "lodash.uniqueid";
+import { nanoid } from "nanoid";
 ```
 
-Next, add an `id` field to our data property, so the component object ends up looking like so (`uniqueId()` returns the specified prefix — `todo-` — with a unique string appended to it):
+Next, add an `id` field to our data property, so the component object ends up looking like so (`nanoid()` returns a unique string with the specified prefix — `todo-`):
 
 ```js
-import uniqueId from "lodash.uniqueid";
+import { nanoid } from "nanoid";
 
 export default {
   props: {
@@ -336,7 +336,7 @@ export default {
   data() {
     return {
       isDone: this.done,
-      id: uniqueId("todo-"),
+      id: "todo-" + nanoid(),
     };
   },
 };
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index 47f74d721a5a969..80f656fd861a0c4 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -42,6 +42,9 @@ Now let's introduce Vue, the third of our frameworks. In this article we'll look
   </tbody>
 </table>
 
+> **Note:**
+> This tutorial targets [Vue version 3.4.21](https://github.com/vuejs/core/blob/main/CHANGELOG.md#3421-2024-02-28) using [`create-vue` 3.10.2](https://github.com/vuejs/create-vue/releases/tag/v3.10.3) (with Node.js version `v20.11.0`) and was last revised in May 2024.
+
 ## A clearer Vue
 
 Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like [jQuery](https://jquery.com/).
@@ -51,7 +54,6 @@ That being said, you can also use Vue to write entire Single Page Applications (
 In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your components.
 
 As you work through this tutorial, you might want to keep the [Vue guide](https://vuejs.org/guide/introduction.html) and [API documentation](https://vuejs.org/api/) open in other tabs, so you can refer to them if you want more information on any sub topic.
-For a good (but potentially biased) comparison between Vue and many of the other frameworks, see [Vue Docs: Comparison with Other Frameworks](https://v2.vuejs.org/v2/guide/comparison.html).
 
 ## Installation
 
@@ -69,41 +71,61 @@ To use Vue in an existing site, you can drop one of the following [`<script>`](/
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
   ```
 
-However, this approach has some limitations. To build more complex apps, you'll want to use the [Vue npm package](https://www.npmjs.com/package/vue). This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:
+However, this approach has some limitations. To build more complex apps, you'll want to use the [Vue npm package](https://www.npmjs.com/package/vue). This will let you use advanced features of Vue and use tools like Vite or WebPack. To make building apps with Vue easier, there is a CLI scaffolding tool [create-vue](https://github.com/vuejs/create-vue) to streamline the development process. To use `create-vue` you will need:
 
-1. Node.js 8.11+ installed.
+1. Node.js 20 installed.
 2. [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [yarn](https://yarnpkg.com/).
 
 > **Note:** If you don't have the above installed, find out [more about installing npm and Node.js](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups) here.
 
-To install the CLI, run the following command in your terminal:
+To install Vue and initialize a new project, run the following command in your terminal:
 
 ```bash
-npm install --global @vue/cli
+npm create vue@latest
 ```
 
 Or if you'd prefer to use yarn:
 
 ```bash
-yarn global add @vue/cli
+yarn create vue@latest
 ```
 
-Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run `vue create <project-name>`. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.
-
-We'll look at using this below.
+This command will give you a list of project configurations you can use. There are a few defaults, but you may pick your own project-specific settings. These options let you configure things like TypeScript, linting, vue-router, testing, and more.
+We'll step through the options in the initialization steps below.
 
 ## Initializing a new project
 
-To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into.
+To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using `create-vue` to build a new scaffold for our app.
+In terminal, `cd` to where you'd like to create your sample app, then run `npm create vue@latest` (or `yarn create vue@latest` if you prefer Yarn).
+
+The interactive tool let's you choose some options and you can procees by pressing <kbd>Enter</kbd>.
+For this project, we'll use the following configuration:
 
-In terminal, `cd` to where you'd like to create your sample app, then run `vue create moz-todo-vue`.
-You can choose the default option `Default ([Vue 3] babel, eslint)` by pressing <kbd>Enter</kbd> to proceed.
-The CLI will now begin scaffolding out your project, and installing all of your dependencies.
+```plain
+✔ Project name: … todo-vue
+✔ Add TypeScript? … No
+✔ Add JSX Support? … No
+✔ Add Vue Router for Single Page Application development? … No
+✔ Add Pinia for state management? … No
+✔ Add Vitest for Unit Testing? … No
+✔ Add an End-to-End Testing Solution? › No
+✔ Add ESLint for code quality? … Yes
+? Add Prettier for code formatting? › Yes
+```
 
-If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager which defaults to `yarn`.
-The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag `--packageManager=<package-manager>`, when you run `vue create`. So if you wanted to create the `moz-todo-vue` project with npm and you'd previously chosen yarn, you'd run `vue create moz-todo-vue --packageManager=npm`.
+After choosing these options, your project structure is now configured and dependencies are defined in a `package.json` file.
+The next steps are to install the dependencies and start the server, and the tool conveniently prints out the commands you need to do this:
 
-> **Note:** We've not gone over all of the options here, but you can [find more information on the CLI](https://cli.vuejs.org) in the Vue docs.
+```plain
+Scaffolding project in /path/to/todo-vue...
+
+Done. Now run:
+
+  cd todo-vue
+  npm install
+  npm run format
+  npm run dev
+```
 
 ## Project structure
 
@@ -111,15 +133,12 @@ If everything went successfully, the CLI should have created a series of files a
 
 - `package.json`: This file contains the list of dependencies for your project, as well as some metadata and `eslint` configuration.
 - `yarn.lock`: If you chose `yarn` as your package manager, this file will be generated with a list of all the dependencies and sub-dependencies that your project needs.
-- `babel.config.js`: This is the config file for [Babel](https://babeljs.io/), which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.
 - `jsconfig.json`: This is a config file for [Visual Studio Code](https://code.visualstudio.com/docs/languages/jsconfig) and gives context for VS Code on your project structure and assists auto-completion.
-- `public`: This directory contains static assets that are published, but not processed by [Webpack](https://webpack.js.org/) during build (with one exception; `index.html` gets some processing).
-
+- `vite.config.js`: This is the configuration file for the [Vite](https://vitejs.dev/) development server that builds and serves your project on your local machine.
+  The Vite server watches source files for changes and can hot-reload the project while you make changes.
+- `public`: This directory contains static assets that are published during build.
   - `favicon.ico`: This is the favicon for your app. Currently, it's the Vue logo.
-  - `index.html`: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
-
-    > **Note:** this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.
-
+- `index.html`: Your Vue app is run from this HTML page.
 - `src`: This directory contains the core of your Vue app.
 
   - `main.js`: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the `index.html` file your app should be attached to. This file is often where you register global components or additional Vue libraries.
@@ -133,11 +152,9 @@ If everything went successfully, the CLI should have created a series of files a
 
 Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.
 
-While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using [Single File Components (SFC)](https://vuejs.org/guide/scaling-up/sfc.html), Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in `.vue`. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.
-
-As a bonus, projects created with the Vue CLI are configured to use `.vue` files with Webpack out of the box. In fact, if you look inside the `src` folder in the project we created with the CLI, you'll see your first `.vue` file: `App.vue`.
+While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using [Single File Components (SFC)](https://vuejs.org/guide/scaling-up/sfc.html), Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in `.vue`. These files are processed by a JS build tool (such as Vite or Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.
 
-Let's explore this now.
+Let's look inside the `src` folder in the project we created with the CLI and inspect your first `.vue` file: `App.vue`.
 
 ### App.vue
 
@@ -147,69 +164,61 @@ Open your `App.vue` file — you'll see that it has three parts: `<template>`, `
 
 > **Note:** By setting the `lang` attribute on the `<template>` tag, you can use Pug template syntax instead of standard HTML — `<template lang="pug">`. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.
 
-`<script>` contains all of the non-display logic of your component. Most importantly, your `<script>` tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a `render()` function.
+`<script>` contains all of the non-display logic of your component. Most importantly, your `<script>` tag is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a `render()` function.
 
-In the case of `App.vue`, our default export sets the name of the component to `App` and registers the `HelloWorld` component by adding it into the `components` property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.
+In the case of `App.vue`, two components `TheWelcome` and `HelloWorld` are registered by means of imports. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This is useful for {{Glossary("Tree shaking")}} (not loading unused code) and bundle splitting (only loading code when needed) because not every page in your app necessarily needs every component.
 
-```js
+```vue
+<script setup>
 import HelloWorld from "./components/HelloWorld.vue";
-
-export default {
-  name: "App",
-  components: {
-    //You can register components locally here.
-    HelloWorld,
-  },
-};
+import TheWelcome from "./components/TheWelcome.vue";
+</script>
 ```
 
 > **Note:** If you want to use [TypeScript](https://www.typescriptlang.org/) syntax, you need to set the `lang` attribute on the `<script>` tag to signify to the compiler that you're using TypeScript — `<script lang="ts">`.
 
 `<style>` is where you write your CSS for the component. If you add a `scoped` attribute — `<style scoped>` — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.
 
-> **Note:** If you select a CSS pre-processor when creating the project via the CLI, you can add a `lang` attribute to the `<style>` tag so that the contents can be processed by Webpack at build time. For example, `<style lang="scss">` will allow you to use SCSS syntax in your styling information.
+> **Note:** If you select a CSS pre-processor when creating the project via the CLI, you can add a `lang` attribute to the `<style>` tag so that the contents can be processed at build time. For example, `<style lang="scss">` will allow you to use SCSS syntax in your styling information.
 
 ## Running the app locally
 
-The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a `serve` command to the project's `package.json` file as an npm script, so you can easily run it.
+The `create-vue` tool comes with Vite as a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server from scratch. The CLI adds commands to the project's `package.json` file as npm scripts so you can easily run them.
 
-In your terminal, try running `npm run serve` (or `yarn serve` if you prefer yarn). Your terminal should output something like the following:
+In your terminal, try running `npm run dev` (or `yarn dev` if you prefer yarn). Your terminal should output something like the following:
 
 ```plain
-INFO  Starting development server...
-98% after emitting CopyPlugin
-
-  DONE  Compiled successfully in 18121ms
+  VITE v5.0.11  ready in 312 ms
 
-  App running at:
-  - Local:   <http://localhost:8080/>
-  - Network: <http://192.168.1.9:8080/>
-
-  Note that the development build is not optimized.
-  To create a production build, run npm run build.
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: use --host to expose
+  ➜  press h + enter to show help
 ```
 
-If you navigate to the "local" address in a new browser tab (this should be something like `http://localhost:8080` as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.
-
-![default Vue app render, with Vue logo, welcome message, and some documentation links](vue-default-app.png)
+If you navigate to the "localhost" address in a new browser tab you should see your app (this address should be `http://localhost:5173/` as stated above, but may vary based on your setup). Right now, the app should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.
 
 ## Making a couple of changes
 
 Let's make our first change to the app — we'll delete the Vue logo. Open the `App.vue` file, and delete the [`<img>`](/en-US/docs/Web/HTML/Element/img) element from the template section:
 
-```html
-<img alt="Vue logo" src="./assets/logo.png" />
+```vue
+<img
+  alt="Vue logo"
+  class="logo"
+  src="./assets/logo.svg"
+  width="125"
+  height="125" />
 ```
 
 If your server is still running, you should see the logo removed from the rendered site almost instantly. Let's also remove the `HelloWorld` component from our template.
 
 First of all delete this line:
 
-```html
-<HelloWorld msg="Welcome to Your Vue.js App" />
+```vue
+<HelloWorld msg="You did it!" />
 ```
 
-If you save your `App.vue` file now, the rendered app will throw an error because we've registered the component but are not using it. We also need to remove the lines from inside the `<script>` element that import and register the component:
+If you save your `App.vue` file now, your editor may show an error because we've registered the `HelloWorld` component but are not using it. We also need to remove the lines from inside the `<script>` element that import and register the component:
 
 Delete these lines now:
 
@@ -217,17 +226,11 @@ Delete these lines now:
 import HelloWorld from "./components/HelloWorld.vue";
 ```
 
-```js
-components: {
-  HelloWorld;
-}
-```
-
-The `<template>` tag is empty now so you'll see an error saying `The template requires child element` in both the console and the rendered app.
+If you remove everything inside the `<template>` tag, you'll see an error saying `The template requires child element` in your editor.
 You can fix this by adding some content inside the `<template>` tag and we can start with a new `<h1>` element inside a `<div>`.
 Since we're going to be creating a todo list app below, let's set our heading to "To-Do List" like so:
 
-```html
+```vue
 <template>
   <div id="app">
     <h1>To-Do List</h1>
@@ -239,9 +242,9 @@ Since we're going to be creating a todo list app below, let's set our heading to
 
 ## Summary
 
-Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.
+Let's leave this here for now. We've learned about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.
 
-With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.
+With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete tasks.
 
 In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png
deleted file mode 100644
index a68d84bb9f97393..000000000000000
Binary files a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png and /dev/null differ
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
index fbaa76246ead2ee..dcebf279133da94 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
@@ -255,14 +255,18 @@ In the `onSubmit` event handler of our `ToDoForm`, let's add a `todo-added` even
      data() {
        return {
          ToDoItems: [
-           { id: uniqueId("todo-"), label: "Learn Vue", done: false },
+           { id: "todo-" + nanoid(), label: "Learn Vue", done: false },
            {
-             id: uniqueId("todo-"),
+             id: "todo-" + nanoid(),
              label: "Create a Vue project with the CLI",
              done: true,
            },
-           { id: uniqueId("todo-"), label: "Have fun", done: true },
-           { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
+           { id: "todo-" + nanoid(), label: "Have fun", done: true },
+           {
+             id: "todo-" + nanoid(),
+             label: "Create a to-do list",
+             done: false,
+           },
          ],
        };
      },
@@ -314,7 +318,7 @@ Now that we have the data from `ToDoForm` available in `App.vue`, we need to add
 
    ```js
    addToDo(toDoLabel) {
-     this.ToDoItems.push({id:uniqueId('todo-'), label: toDoLabel, done: false});
+     this.ToDoItems.push({id: "todo-" + nanoid(), label: toDoLabel, done: false});
    }
    ```
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
index d808af8a30dedbc..7e2bab469769e17 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
@@ -79,21 +79,21 @@ Now that we have a list of items, we can use the `v-for` directive to display th
 
 Before we do that, there's one other piece of syntax to know about that is used with `v-for`, the `key` attribute. To help Vue optimize rendering the elements in the list, it tries to patch list elements so it's not recreating them every time the list changes. However, Vue needs help. To make sure it is re-using list elements appropriately, it needs a unique "key" on the same element that you attach `v-for` to.
 
-To make sure that Vue can accurately compare the `key` attributes, they need to be string or numeric values. While it would be great to use the name field, this field will eventually be controlled by user input, which means we can't guarantee that the names would be unique. We could use `lodash.uniqueid()`, however, like we did in the previous article.
+To make sure that Vue can accurately compare the `key` attributes, they need to be string or numeric values. While it would be great to use the name field, this field will eventually be controlled by user input, which means we can't guarantee that the names would be unique. We can use `nanoid()`, however, as we did in the previous article.
 
-1. Import `lodash.uniqueid` into your `App` component in the same way you did with your `ToDoItem` component, using
+1. Import `nanoid` into your `App` component in the same way you did with your `ToDoItem` component, using
 
    ```js
-   import uniqueId from "lodash.uniqueid";
+   import { nanoid } from "nanoid";
    ```
 
-2. Next, add an `id` field to each element in your `ToDoItems` array, and assign each of them a value of `uniqueId('todo-')`.
+2. Next, add an `id` field to each element in your `ToDoItems` array, and assign each of them a value of `"todo-" + nanoid()`.
 
    The `<script>` element in `App.vue` should now have the following contents:
 
    ```js
    import ToDoItem from "./components/ToDoItem.vue";
-   import uniqueId from "lodash.uniqueid";
+   import { nanoid } from "nanoid";
 
    export default {
      name: "app",
@@ -103,14 +103,18 @@ To make sure that Vue can accurately compare the `key` attributes, they need to
      data() {
        return {
          ToDoItems: [
-           { id: uniqueId("todo-"), label: "Learn Vue", done: false },
+           { id: "todo-" + nanoid(), label: "Learn Vue", done: false },
            {
-             id: uniqueId("todo-"),
+             id: "todo-" + nanoid(),
              label: "Create a Vue project with the CLI",
              done: true,
            },
-           { id: uniqueId("todo-"), label: "Have fun", done: true },
-           { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
+           { id: "todo-" + nanoid(), label: "Have fun", done: true },
+           {
+             id: "todo-" + nanoid(),
+             label: "Create a to-do list",
+             done: false,
+           },
          ],
        };
      },
@@ -150,7 +154,7 @@ There's one little bit of refactoring we can do here. Instead of generating the
 1. Add a new prop to your `ToDoItem` component — `id`.
 2. Make it required, and make its type a `String`.
 3. To prevent name collisions, remove the `id` field from your `data` attribute.
-4. You are no longer using `uniqueId`, so you need to remove the `import uniqueId from 'lodash.uniqueid';` line, otherwise your app will throw an error.
+4. You are no longer using `nanoid`, so you need to remove the `import { nanoid } from 'nanoid';` line, otherwise your app will throw an error.
 
 The `<script>` contents in your `ToDoItem` component should now look something like this: