diff --git a/front/fo/client/components/sample/sub-component.vue b/front/fo/client/components/sample/sub-component.vue
new file mode 100644
index 0000000..cc1f17f
--- /dev/null
+++ b/front/fo/client/components/sample/sub-component.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div>{{ innerText }}</div>
+    <button @click="innerText = '내부 값 변경'">text 값 변경</button>
+
+    <div>{{ textSub }}</div>
+    <button @click="changeText2">text2 값 변경</button>
+  </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop, PropSync, Emit } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component
+/**
+ * @vuese
+ * @group component group
+ * component description
+ */
+export default class extends CustomFoComponent {
+  // #region variables
+  @PropSync('text', { default: '기본 값' }) innerText: string
+  @Prop() readonly textSub: string
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  changeText2() {
+    this.$emit('text2_required_change', 'text2 변경 값')
+  }
+
+  notify() {
+    alert('경고')
+  }
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>
diff --git a/front/fo/client/middleware/custom.ts b/front/fo/client/middleware/custom.ts
new file mode 100644
index 0000000..a55cadf
--- /dev/null
+++ b/front/fo/client/middleware/custom.ts
@@ -0,0 +1,5 @@
+import { Context } from '@nuxt/types'
+
+export default async (context: Context) => {
+  console.log('executed')
+}
diff --git a/front/fo/client/pages/sample2/index.vue b/front/fo/client/pages/sample2/index.vue
new file mode 100644
index 0000000..1606da3
--- /dev/null
+++ b/front/fo/client/pages/sample2/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div class="sample-container">안녕하세요.</div>
+    <div ref="valueEl">{{ value1 }}</div>
+    <div>{{ comValue2 }}</div>
+    <button @click="changeValue">value1 값 변경</button>
+    <button @click="comValue2 = 'a,b'">comValue2 값 변경</button>
+
+    <sub-component ref="subComponent" :text.sync="subText" :text-sub="subText2" @text2_required_change="text2RequiredChange" />
+    <button @click="subText = '변경'">subText 변경</button>
+    <button @click="notify">notify</button>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Ref, Watch } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+import SubComponent from '@/components/sample/sub-component.vue'
+import { HttpMethod } from '@ustra/core/src/server/http/const'
+
+@Component({
+  name: 'sample2-index-page',
+  components: {
+    SubComponent,
+  },
+  asyncData: async ctx => {
+    const result = (
+      await ctx.$ustra.api.call({
+        url: 'http://localhost:9902/api/npass/test',
+        method: HttpMethod.POST,
+        data: {},
+      })
+    ).data
+
+    return { subText: result.body }
+  },
+})
+export default class extends CustomFoComponent {
+  // #region variables
+  value1: string = null
+  value2: string = 'a'
+
+  subText: string = '상위 컴포넌트 Prop 값'
+  subText2: string = 'text2 기본 값'
+
+  @Ref() readonly valueEl: HTMLDivElement
+  @Ref() readonly subComponent: SubComponent
+
+  get comValue2() {
+    return this.value1 + this.value2
+  }
+
+  set comValue2(value: string) {
+    this.value1 = value.split(',')[0]
+    this.value2 = value.split(',')[1]
+  }
+
+  // set comValue2() {}
+
+  // #endregion
+  // #region hooks
+
+  created() {
+    this.value1 = 'value1'
+  }
+
+  mounted() {
+    // console.log('refs', this.valueEl)
+    this.valueEl.innerHTML = 'test변수'
+  }
+
+  // #endregion
+  // #region methods
+
+  changeValue() {
+    this.value1 = 'value1 변경'
+  }
+
+  text2RequiredChange(e) {
+    this.subText2 = e
+  }
+
+  notify() {
+    this.subComponent.notify()
+  }
+
+  // #endregion
+  // #region watches
+  @Watch('comValue2')
+  comValue2Changed(v, o) {
+    console.log(v, o)
+  }
+
+  // #endregion
+}
+</script>
+<style lang="scss">
+.sample-container {
+  margin-top: 200px;
+}
+</style>
diff --git a/front/fo/nuxt.config.ts b/front/fo/nuxt.config.ts
index 0b6ecfe..46ebabe 100644
--- a/front/fo/nuxt.config.ts
+++ b/front/fo/nuxt.config.ts
@@ -26,7 +26,7 @@ export default async () => {
       datePattern: 'YYYY-MM-DD-HH',
     },
     server: {
-      type: configProperties.ServerType.NONE,
+      type: configProperties.ServerType.CONNECT,
       middleware: {
         compress: true,
         bodyParser: true,
@@ -44,7 +44,7 @@ export default async () => {
       },
       css: ['~/assets/global.scss'],
       head: {
-        titleTemplate: 'U.STRA Node Framework Sample - FO',
+        titleTemplate: 'U.STRA Node Framework Sample - FO %s',
         title: '',
       },
       generation: {
@@ -74,5 +74,6 @@ export default async () => {
     _config.env.SERVER_PROP_ENC_KEY = 'Z3NjLWNyeXB0by1rZXkxMQ=='
 
     _config.build.transpile.push('@ustra-sample/cmm')
+    _config.router.middleware.push('custom')
   })
 }
diff --git a/front/fo/package.json b/front/fo/package.json
index ea6c9ea..44ea4ae 100644
--- a/front/fo/package.json
+++ b/front/fo/package.json
@@ -12,8 +12,10 @@
     "IE >= 11"
   ],
   "scripts": {
-    "dev": "cross-env NODE_ENV=development CONFIG_ENV=local nuxt-ts dev --spa",
-    "generate": "rm -rf ./node_modules && cross-env NODE_ENV=production CONFIG_ENV=dev nuxt-ts generate --spa",
+    "dev": "cross-env NODE_ENV=development CONFIG_ENV=local nuxt dev",
+    "build": "cross-env NODE_ENV=development CONFIG_ENV=local nuxt build",
+    "start": "cross-env NODE_ENV=development CONFIG_ENV=local nuxt start",
+    "generate": "rm -rf ./node_modules && cross-env NODE_ENV=production CONFIG_ENV=dev nuxt generate",
     "test": "jest --detectOpenHandles --forceExit"
   },
   "dependencies": {