diff --git a/src/guide/composition-api-provide-inject.md b/src/guide/composition-api-provide-inject.md
index 828105202d..8be3d50b97 100644
--- a/src/guide/composition-api-provide-inject.md
+++ b/src/guide/composition-api-provide-inject.md
@@ -60,7 +60,7 @@ Using our `MyMap` component, our provided values can be refactored as the follow
 
 <script>
 import { provide } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -123,7 +123,7 @@ Using our `MyMap` component, our code can be updated as follows:
 
 <script>
 import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -159,7 +159,7 @@ For example, in the event we needed to change the user's location, we would idea
 
 <script>
 import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -198,7 +198,7 @@ However, there are times where we need to update the data inside of the componen
 
 <script>
 import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -254,7 +254,7 @@ Finally, we recommend using `readonly` on provided property if you want to ensur
 
 <script>
 import { provide, reactive, readonly, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {