diff --git a/src/guide/web-components.md b/src/guide/web-components.md
index e75cfd91ce..18569b3760 100644
--- a/src/guide/web-components.md
+++ b/src/guide/web-components.md
@@ -200,7 +200,7 @@ It is recommended to export the individual element constructors to give your use
 ```js
 import { defineCustomElement } from 'vue'
 import Foo from './MyFoo.ce.vue'
-import Bar from './MyBar.ce.bar'
+import Bar from './MyBar.ce.vue'
 
 const MyFoo = defineCustomElement(Foo)
 const MyBar = defineCustomElement(Bar)