App Template for Using FeathersVuex with Vite as a Single Page Application
This is a PWA template for FeathersVuex and Vite, inspired by Vitesse by @antfu. The majority of the plugins, etc., are the same, so refer to the vitesse project for more information.
@feathersjs/vuex
ready for your config. Bring your own FeathersJS API.
[Auth0] authentication
Windi CSS - on-demand Tailwind CSS with speed
Use icons from any icon sets, with no compromise Browse Icons
Dark Mode Support
Use the new <script setup>
style
TypeScript, of course
Deploy on Netlify, zero-config
To get up and running quickly, this template comes with Auth0 SPA login support. Auth0's free account generously provides up to 7000 active users per month. This app template takes care of the client side of auth. Take a look at https://github.com/morphatic/feathers-auth0-strategy for turnkey Auth0 authentication on the Feathers API server.
The below steps are required to get it to work. To disable it, see the next section.
Single Page Application
. Make note of the domain and client secret. Add http://localhost:3000
(or the host assigned by Vite upon startup) to the following places in the Auth0 application admin page. (If these settings are not correct, you will see 403 errors upon loading the page.)src/auth0.ts
Use the domain and client secret from step 1.src/feathers.ts
Update the apiUrl
variable.If you are using VS Code, you may need to use the "Reload Window" command after you configure environment variables.
You can disable Auth0 integration by doing the following:
src/main.ts
// Remove this line
import { setupAuth0, storage } from '~/modules/auth0'
// Remove this line
setupAuth0()
// Update this line to remove the `storage` variable
const feathers = setupFeathers({ storage })
// The above line should look like this:
const feathers = setupFeathers({})
src/store/store.ts
, Switch back to the vanilla FeathersVuex auth plugin:// Remove this line
auth({ feathers }),
// Uncomment this line to use the default auth plugin
feathers.apiVuex.makeAuthPlugin({ userService: 'users' })