All Projects → klswcz → spotify-auth-code-example-vue

klswcz / spotify-auth-code-example-vue

Licence: other
VueJS boilerplate app with Spotify API authentication and data fetching.

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects

Projects that are alternatives of or similar to spotify-auth-code-example-vue

spotifytrack
A personal homepage showing users' top songs and artists, providing a shareable link that they can use to show it off to friends.
Stars: ✭ 48 (+300%)
Mutual labels:  spotify, spotify-api
react-redux-spotify
React + Redux + Spotify web api boilerplate project
Stars: ✭ 14 (+16.67%)
Mutual labels:  spotify, spotify-api
springtunes
Control your Spotify client remotely from your browser
Stars: ✭ 19 (+58.33%)
Mutual labels:  spotify, spotify-api
spottr
🌵 Your Spotify stats all in one place.
Stars: ✭ 25 (+108.33%)
Mutual labels:  spotify, spotify-api
spotify-true-random
🔀 An application for unbiased truly random playlist and library shuffling with Spotify.
Stars: ✭ 51 (+325%)
Mutual labels:  spotify, spotify-api
spotify-vibe-check
Spotify Vibe Checker Web App to vibe check your Spotify Playlists! (currently broken due to CORS)
Stars: ✭ 24 (+100%)
Mutual labels:  spotify, spotify-api
graphql-spotify
GraphQL Schema And Resolvers For Spotify Web API
Stars: ✭ 55 (+358.33%)
Mutual labels:  spotify, spotify-api
spotify-api-graphql-console
Spotify Web API GraphQL console.
Stars: ✭ 29 (+141.67%)
Mutual labels:  spotify, spotify-api
remixr
Discover new music based on the Spotify playlists you know and love!
Stars: ✭ 37 (+208.33%)
Mutual labels:  spotify, spotify-api
node-js-starter-kit
This is the starter kit project for node js REST API development with express js, mongodb, typescript, webpack specially designed for REST API projects.
Stars: ✭ 14 (+16.67%)
Mutual labels:  expressjs, pm2
listentogether-hackathon
Grab some friends, connect your Spotify account, and listen to music in sync with each other.
Stars: ✭ 20 (+66.67%)
Mutual labels:  spotify, spotify-api
MySpotify
A website to view your Spotify stats.
Stars: ✭ 38 (+216.67%)
Mutual labels:  spotify, expressjs
spotipy2
The next generation Spotify Web API wrapper for Python 3.7+
Stars: ✭ 25 (+108.33%)
Mutual labels:  spotify, spotify-api
SpotMusicGen
A Program that creates a Spotify playlist from a YouTube Playlist
Stars: ✭ 47 (+291.67%)
Mutual labels:  spotify, spotify-api
SpotifyWebApi
A .net core wrapper for the Spotify Web API
Stars: ✭ 19 (+58.33%)
Mutual labels:  spotify, spotify-api
spotify-terminal
Terminal application to play/control Spotify.
Stars: ✭ 61 (+408.33%)
Mutual labels:  spotify, spotify-api
xspfy
Import XSPF playlists to Spotify.
Stars: ✭ 29 (+141.67%)
Mutual labels:  spotify, spotify-api
aw-watcher-spotify
Logs what you listen to on Spotify
Stars: ✭ 41 (+241.67%)
Mutual labels:  spotify, spotify-api
spotify-clone
🎶🎶Simple Spotify Clone using ReactJs. Here we are using the Official Spotify API to make calls. Here we can able to login, logout and gear the music.
Stars: ✭ 21 (+75%)
Mutual labels:  spotify, spotify-api
react-ssr-spa
Server side rendered single page app using reactjs official libraries.
Stars: ✭ 30 (+150%)
Mutual labels:  expressjs, pm2

Example VueJS app with implementation of Spotify's Authorization Code API flow

Project showcases flow that let's you fetch access and refresh token (find out more here).

Frontend comes with Vue Router and VueX already baked in.

Project setup

Set up your project credentials

You will need to register your app and get your own credentials from the Spotify for Developers Dashboard and add this url http://localhost:8081/callback/ to the Redirect URIs list.

Open a project, go to server.js file and update client_id, client_secret, redirect_uri, server_address and frontend_server_port variables to match your app's setup. Open HelloWorld.vue and replace YOUR_SERVER_ADDRESS with http://localhost:8081/callback/

Install dependencies

yarn install

Run VueJS

yarn run serve

Run Express server

pm2 start server.js

Then, open http://localhost:8080 in a browser.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].