diff --git a/docs/guide/index.md b/docs/guide/index.md
index 5f6f9839d..abedcbaf5 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -34,12 +34,16 @@ Note how instead of using regular `a` tags, we use a custom component `router-li
 ## JavaScript
 
 ```js
-// 1. Define route components.
+// 1. Import router
+import { createRouter, createWebHashHistory } from 'vue-router'
+import {createApp} from 'vue'
+
+// 2. Define route components.
 // These can be imported from other files
 const Home = { template: '<div>Home</div>' }
 const About = { template: '<div>About</div>' }
 
-// 2. Define some routes
+// 3. Define some routes
 // Each route should map to a component.
 // We'll talk about nested routes later.
 const routes = [
@@ -47,17 +51,17 @@ const routes = [
   { path: '/about', component: About },
 ]
 
-// 3. Create the router instance and pass the `routes` option
+// 4. Create the router instance and pass the `routes` option
 // You can pass in additional options here, but let's
 // keep it simple for now.
-const router = VueRouter.createRouter({
-  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
-  history: VueRouter.createWebHashHistory(),
+const router = createRouter({
+  // 5. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: createWebHashHistory(),
   routes, // short for `routes: routes`
 })
 
-// 5. Create and mount the root instance.
-const app = Vue.createApp({})
+// 6. Create and mount the root instance.
+const app = createApp({})
 // Make sure to _use_ the router instance to make the
 // whole app router-aware.
 app.use(router)