English | Français
This is a simple project built in Vue 3 using the composition API.
This project was built in 5 days for the Spotify Dev Jam, it is the first project I ever built with Vue.js and served as an introduction to the framework and modern Javascript.
The Spotify Now Playing viewer will
- ✅ - Use the Spotify Web API to get your current playing track (no other data is accessed)
- ✅ - Use Access and Refresh Tokens to ensure that you're kept logged in between sessions
- ✅ - Display the current track artist
- ✅ - Show the Album cover spinning in 3D
- ✅ - Set a matching vibrant background colour with node-vibrant
Note: Due to #492 of the Spotify Web API, there is currently no way to stream the now playing song. By such, this project is meant to be self-hosted to avoid rate-limiting.
If you want to use the project you should fork it and build with Netlify or your own webserver using your own API keys (see How to use).
The demo website above only serves as demonstration, due to the API limits imposed by Spotify only the users whose emails have been manually added to the app can log in.
Most modern browsers are supported (excluding Internet Explorer).
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Edge | Firefox | Chrome | Safari | Opera |
You can either clone the repo, compile the code offline, and upload to your own webserver or use one of the supported platforms.
The tutorial below is for Netlify, Vue.js works with other platforms as well such as Github and Gitlab Pages (though do take precautions with your API keys, for more info, please check out: https://cli.vuejs.org/guide/deployment.html#platform-guides)
On this page, click on the 'Fork' button in the top-right to create a copy of the repo as-is on your account. Alternatively, you can clone the repo and push to Github.
Log in to Netlify and click 'New site from Git'.
If you're doing this for the first time, you will need to authorise your Github account with Netlify by following the instructions.
Once authorised, follow the on-screen instructions to connect your repository. You should be fine to leave the default settings as-is here.
Click on 'Deploy site'.
Note: This project was built around Node 16. This has been set in the project environment.
To allow authorisation to your track data, you'll need to generate client keys. You can do this by logging in to the Spotify Dashboard and creating an app.
Set the 'Redirect URI' as the URL of your project in Netlify. This must be set else Spotify won't authorise the app.
You can leave the other settings (Callback URL, Bundle IDs etc) blank.
Copy down the Client Secret and Client ID and save your app in the Spotify Dashboard.
Now that we have our Spotify API keys, we must let the app know that they exist.
To do this, navigate to Netlify > Site Settings > Build & Deploy > Environment
Under 'Environment variables', add two fields. The 'Keys' can be found in the env.sample file and the values will be the Client ID and Client Secret, respectively.
Hit save.
Once the environment variables are in, you can now navigate to your Netlify site. You'll be prompted with a Spotify login button. Do that, and you're good to go!
npm install
npm run serve
npm run build
npm run lint
This project was heavily inspired by Nowify.
Please give them your support!
Thanks node-vibrant and Bootstrap 5.0 for making the design process much easier.