Add middleware to page in nuxt-typescript project

i'm working on nuxt-typescript project. my middleware in /middleware/redirect.ts:

import { Middleware } from '@nuxt/types'

const redirect: Middleware = (context) => {
  console.log(context)
}

export default redirect

and added to index.veu page like this:

<script lang="ts">
import Vue from 'vue'
import redirect from '~/middleware/redirect'

export default Vue.extend({
  middleware: [redirect],
  data () {
    return {}
  }
})
</script>

but it does not work and I get error. any solution?

unfortunately, the documentation is not clear. click