This template will set up a development environment for auth0 on Vue 3, deployed to GitHub pages.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar)
The first task is to install Vue 3. Vue’s scaffolding is intialized with
the following npm
command; I like to think of it like
usethis::create_project()
except for Vue. It will make a new directory
with the title of your project and put some boilerplate documents in it.
npm init vue@latest
Helpfully, the output gives us next steps, the first two of which are
npm install
At this point, believe it or not, we have a working Vue app! You can
view it with the following npm
command, which is very useful for
compiling and hot-reloading when developing.
npm run dev
If you follow the localhost
link that it gives you in your browser,
you get your app. Awesome!
If at any time you’re ready to compile the app and minify it for production, run
npm run build
which will put the web components in the dist/
directory. These can be
uploaded to your prod HTTP server for consumption. Note that
index.html
in dist/
won’t work locally out-of-the-box (it is meant
to be served by an HTTP server, so paths will break locally). This is
described
here.
You can serve dist/
locally like this
npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist
auth0 is installed as a Vue dependency with the following line
npm install @auth0/auth0-vue
To implement an auth0 template, we’ll use steps from the Vue example from the auth0 site.
To get the minimal example running, you just need to do two things:
modify src/App.vue
to script the relevant form, then import/mount
auth0 (and its theme) in src/main.js
. With another call to
npm run dev
we’re now looking at our app skeleton. Nice!