diff --git a/packages/x-components/src/components/location-provider.vue b/packages/x-components/src/components/location-provider.vue
index 9737cd2a0c..a485785885 100644
--- a/packages/x-components/src/components/location-provider.vue
+++ b/packages/x-components/src/components/location-provider.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Prop, Provide, Component } from 'vue-property-decorator';
-  import { NoElement } from '../components/no-element';
+  import { defineComponent, PropType, provide, toRef } from 'vue';
   import { FeatureLocation } from '../types';
+  import { useNoElementRender } from '../composables/index';
 
   /**
    * Location Provider component.
@@ -9,17 +9,26 @@
    *
    * @public
    */
-  @Component
-  export default class LocationProvider extends NoElement {
-    /**
-     * The {@link FeatureLocation} to provide.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    @Provide()
-    protected location!: FeatureLocation;
-  }
+  export default defineComponent({
+    name: 'LocationProvider',
+    props: {
+      /**
+       * The {@link FeatureLocation} to provide.
+       *
+       * @public
+       */
+      location: {
+        type: String as PropType<FeatureLocation>,
+        required: true
+      }
+    },
+    setup(props, { slots }) {
+      const featureLocation = toRef(props, 'location');
+      provide('location', featureLocation);
+
+      return () => useNoElementRender(slots);
+    }
+  });
 </script>
 
 <docs lang="mdx">