How to integrate okta-vue with VueCLI4

I am attempting to set up a basic Vue authentication page using the Okta-Vue package. The tutorial I am referencing is here: https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node. For this project, I am using VueCLI 4. After creating the project, I attempted to set up the Okta authentication protocols in the router file

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import PostsManager from '@/components/PostsManager'
import OktaVue, { LoginCallback } from '@okta/okta-vue'
import { OktaAuth } from '@okta/okta-auth-js'

const oktaAuth = new OktaAuth({
  issuer: 'https://{dev-id}.okta.com/oauth2/default',
  clientId: '{clientId}',
  redirectUri: 'http://localhost:8080/login/callback',
  scopes: ['openid', 'profile', 'email']
})

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login/callback',
    component: LoginCallback
  },
  {
    path: '/posts-manager',
    name: 'PostsManager',
    component: PostsManager,
    meta: {
      requiresAuth: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

The instructions for setting up this demo appear to be based on an older version of VueCLI, which expects Vue to be imported into the router file, in order to execute the following:

Vue.use(OktaVue, { oktaAuth })

Since Vue.use() is not part of the new version of the vue-router, what is the proper way to execute OktaVue and oktaAuth in the above router file?

Solution

In Vue 3, the plugin is registered on the application instance from createApp() with app.use(), which is the equivalent to Vue 2's Vue.use():

// router.js
import { createRouter } from 'vue-router'

const router = createRouter(⋯)
export default router

// auth.js
import { OktaAuth } from '@okta/okta-auth-js'

export const oktaAuth = new OktaAuth(⋯)

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import OktaVue from '@okta/okta-vue'
import { oktaAuth } from './auth'

createApp(App)
  .use(OktaVue, { oktaAuth }) 👈
  .use(router)
  .mount('#app')