Can you provide me new updated vue documentation

Hi,
I am tring to create login process for my brand new SPA on okta and documentation provided on github is not working, can you please provide me any other helpfull document, i want to use sing in widget to customize also.

with regards,

https://developer.okta.com/code/vue/okta_vue_sign-in_widget/

Thank you for the reference.
Issues occurred during compiling:
it asked me to install “npm install --save @okta/okta-auth-js” and i did as re run the server.
warning i received:

C:\Users\sahithpixels\PycharmProjects\client\src\components\Login.vue
  14:20  warning  Unexpected unnamed function  func-names

Result:
After running the server with on warning, Nothing came up on the screen. its just a blank white screen.

when i inspected network tab on webpage, I see call got stuck at websocket with status 101, saying request is not a finished.

My App.vue:

    <template>
      <div id="app">
        <nav>
          <div>
            <router-link to="/">
              Okta-Vue Sample Project
            </router-link>
            <router-link to="/login" v-if="!authenticated">
              Login
            </router-link>
            <router-link to="/profile" v-if="authenticated" >
              Profile
            </router-link>
            <router-link to="/" v-if="authenticated" v-on:click.native="logout()">
              Logout
            </router-link>
          </div>
        </nav>
        <div id="content">
          <router-view/>
        </div>
      </div>
    </template>

    <script>
    export default {
      name: 'app',
      data() {
        return { authenticated: false };
      },
      created() {
        this.isAuthenticated();
        this.$auth.authStateManager.subscribe(this.isAuthenticated);
      },
      watch: {
        // Everytime the route changes, check for auth status
        $route: 'isAuthenticated',
      },
      methods: {
        async isAuthenticated() {
          this.authenticated = await this.$auth.isAuthenticated();
        },
        async logout() {
          await this.$auth.signOut();
          await this.isAuthenticated();
        },
      },
    };
    </script>
<style>
nav div a { margin-right: 10px }
</style>

My Index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Auth from '@okta/okta-vue';
// eslint-disable-next-line import/no-unresolved
import { OktaAuth } from '@okta/okta-auth-js';
// eslint-disable-next-line import/extensions
import HomeComponent from '@/components/Home.vue';
// eslint-disable-next-line import/extensions
import LoginComponent from '@/components/Login';
// eslint-disable-next-line import/extensions
import ProfileComponent from '@/components/Profile';

Vue.use(VueRouter);

const oktaAuth = new OktaAuth({
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{clientId}',
  redirectUri: `${window.location.origin}/login/callback`,
  scopes: ['openid', 'profile', 'email'],
});
Vue.use(Auth, { oktaAuth });

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: HomeComponent,
    },
    {
      path: '/login',
      component: LoginComponent,
    },
    {
      path: '/login/callback',
      component: Auth.handleCallback(),
    },
    {
      path: '/profile',
      component: ProfileComponent,
      meta: {
        requiresAuth: true,
      },
    },
  ],
});

const onAuthRequired = async (from, to, next) => {
  // eslint-disable-next-line max-len
  if (from.matched.some((record) => record.meta.requiresAuth) && !(await Vue.prototype.$auth.isAuthenticated())) {
    // Navigate to custom login page
    next({ path: '/login' });
  } else {
    next();
  }
};

router.beforeEach(onAuthRequired);

export default router;

My Login.vue

<template>
  <div class="login">
    <div id="okta-signin-container"></div>
  </div>
</template>

<script>
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

export default {
  name: 'Login',
  mounted() {
    this.$nextTick(function () {
      this.widget = new OktaSignIn({
        baseUrl: 'https://dev-730466.okta.com',
        clientId: '0oa213zmmnjvPkYXI4x7',
        redirectUri: 'http://localhost:8080/login/callback',
        authParams: {
          pkce: true,
          issuer: 'https://dev-730466.okta.com/oauth2/default',
          display: 'page',
          scopes: ['openid', 'profile', 'email'],
        },
      });
      this.widget.showSignInAndRedirect(
        { el: '#okta-signin-container' },
      );
    });
  },
  destroyed() {
    // Remove the widget from the DOM on path change
    this.widget.remove();
  },
};
</script>

Did you use the same versions that are specified at the top of that page? If you don’t, there’s no guarantee that it works.

This guide is for @okta/okta-signin-widget v5.2.0, @okta/okta-vue v3.0.0 and okta-auth-js v4.5.0.

This means that instead of npm install @okta/okta-signin-widget, you need to use npm install @okta/okta-signin-widget@5.2.0.

Also, if you find it doesn’t work without specifying versions, please enter an issue in the Okta Vue project on GitHub. You could also try using our Vue Samples.

Thanks for the versions, I tried with the specified versions and it is same, i dont get anything, no network proof app is reaching okta.

Can you please enter an issue in the Okta Vue project describing your issue and how to reproduce it? If our docs don’t work, we should fix them.

Sure, I am working on it.
Thank you,