Skip to content

Latest commit

 

History

History
153 lines (101 loc) · 6.77 KB

quickstart-javascript-vue-web.mdx

File metadata and controls

153 lines (101 loc) · 6.77 KB
title description navcategory prerequisites section technology language icon faIcon color codeRoot cta
Vue.js
Quickstart integration of a Vue.js web application with FusionAuth
getting-started
Node 18
spa
Vue.js
JavaScript
/img/icons/vue.js.svg
fa-vue
red
EmailListCTA

import Aside from '/src/components/Aside.astro'; import DockerSpinup from '/src/components/quickstarts/DockerSpinup.astro'; import HostedBackendWarning from 'src/content/docs/_shared/_hosted-backend-warning.md'; import Intro from '/src/components/quickstarts/Intro.astro'; import LoginArchitectureSdk from '/src/components/quickstarts/LoginArchitectureSdk.astro'; import NextSteps from '/src/components/quickstarts/NextSteps.astro'; import {RemoteCode} from '@fusionauth/astro-components'; import QuickstartTshirtCTA from '/src/components/quickstarts/QuickstartTshirtCTA.astro'

Prerequisites

  • Node v18: This will be used to run the Vue.js application.
  • Docker: The quickest way to stand up FusionAuth. (There are other ways).

This app has been tested with Node v18 and Vue.js v3.3.4. This example should work with other compatible versions of Node and Vue.js.

General Architecture

Getting Started

In this section, you'll get FusionAuth up and running and use Vue.js CLI to create a new application.

Clone The Code

First off, grab the code from the repository and change into that directory.

git clone https://github.com/FusionAuth/fusionauth-quickstart-javascript-vue-web.git
cd fusionauth-quickstart-javascript-vue-web

Run FusionAuth Via Docker

<DockerSpinup kickstartUri={frontmatter.codeRoot + "/kickstart/kickstart.json"} />

Create A Basic Vue.js Application

Now you are going to create a basic Vue.js application using Create Vue. While this section builds a simple Vue.js application, you can use the same configuration to integrate your existing Vue.js application with FusionAuth.

npm create vue@latest -- changebank --typescript --router

We are going to use the Hosted Backend feature of FusionAuth, so you don't need to worry about setting up a backend server.

While this example uses localhost for your application and FusionAuth, there are complications if you plan to deploy using FusionAuth Cloud.

First, install the FusionAuth Vue SDK:

npm install @fusionauth/vue-sdk

Next, you'll need to configure and activate the FusionAuth Vue SDK. You can do this by updating the src/main.ts file contents. Replace what is there with this:

Our example application is going to have a home page, an account page and a page where someone can make change. The account and make change page will be protected and only visible to logged in users.

Create A Home Page

The next step is to get a basic home page up and running. We’ll take this opportunity to copy in all the images and CSS style files that you’ll need for the application.

Run the following copy command to copy these files from the quickstart repo into your project. This assumes that you checked the quickstart repo out into the parent directory. If that’s not the case, replace the .. below with your actual repo location.

cp -r ../complete-application/src/assets src

The home page will be a simple page with a welcome message and a login link. Replace the content of the file src/views/HomeView.vue:

Create An Account Page

The account page displays a random balance for the logged in user. Create a new file src/views/AccountView.vue:

Create A Make Change Page

Next, you'll create a page only visible to logged in users. This page displays an input field for the user to enter a dollar amount and a button to convert that amount into coins. Create a new file src/views/MakeChangeView.vue:

Authentication

You now have created a basic Vue.js application with a home page, account page and a page for making change.

Depending on the user's authentication state, the login or logout button should be displayed in the header. For this create a new file src/components/LogoHeader.vue:

Additionally, we want to display different menu items. For this create a new file src/components/MenuBar.vue:

The next step is to tie it all together. Update the src/App.vue file to add the router view and header. You can replace the contents of the file with the below:

And finally we register the routes in src/router/index.ts. Update that file with the code below.

Running The Application

You can now run the application with the following command:

npm run dev

You can now open up an incognito window and navigate to http://localhost:5173. You will be greeted with the home page. Log in with the user account you created when setting up FusionAuth, and you'll be redirected to the account page.

The username and password of the `example user` can be found in the FusionAuth via Docker section at the top of this article.

Next Steps