diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index bf349976..500bd383 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -19,6 +19,7 @@
 import Vue from 'vue';
 
 import TMagicApp, { DataSourceManager, DeepObservedData, getUrlParam, registerDataSourceOnDemand } from '@tmagic/core';
+import type { userRenderFunctionOptions } from '@tmagic/vue-runtime-help';
 
 import asyncDataSources from '../.tmagic/async-datasource-entry';
 import components from '../.tmagic/comp-entry';
@@ -64,6 +65,10 @@ registerDataSourceOnDemand(dsl, asyncDataSources).then((dataSources) => {
   const vueApp = new Vue({
     provide: {
       app,
+      userRender: ({ h, type, props, attrs, style, className }: userRenderFunctionOptions) =>
+        // class作为保留字符，android 4.4以下不能直接使用, 需要加引号
+        // eslint-disable-next-line prettier/prettier
+        h(type, { props, attrs, style, 'class': className }),
     },
 
     render: (h) => h(AppComponent),
diff --git a/runtime/vue2/playground/main.ts b/runtime/vue2/playground/main.ts
index 17819187..b3c65396 100644
--- a/runtime/vue2/playground/main.ts
+++ b/runtime/vue2/playground/main.ts
@@ -19,6 +19,7 @@
 import Vue from 'vue';
 
 import TMagicApp, { DataSourceManager, DeepObservedData } from '@tmagic/core';
+import type { userRenderFunctionOptions } from '@tmagic/vue-runtime-help';
 
 import App from './App.vue';
 
@@ -61,6 +62,10 @@ Promise.all([
     render: (h) => h(App),
     provide: {
       app,
+      userRender: ({ h, type, props, attrs, style, className }: userRenderFunctionOptions) =>
+        // class作为保留字符，android 4.4以下不能直接使用, 需要加引号
+        // eslint-disable-next-line prettier/prettier
+        h(type, { props, attrs, style, 'class': className }),
     },
     el: '#app',
   });