Integrate Last.fm API with Vue.js
Tags: webdev, vue, vite, api
Published: 2022-11-05 15:07:58

## Introduction
For a few years now, I've been registered on the [Last.fm](https://www.last.fm/fr/thomasbnt_) website. It's a site that allows you to save the artists you listen to and see similar artists. You can also see the artists you have listened to and listen to them again on Spotify or YouTube.

![My last scrobbles on my Last.fm account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ujbkg6rcvpk387ohn9s.png)

It allows you to have statistics, to know which style of music you listen to the most, the total number of songs, etc. A tool for music lovers like me who like to see the evolution of his listening. I know I'm repeating myself quite often with the word "listens", and this is not over! 😆

So I made a little project [from the Last.fm API](https://www.last.fm/api) to see the artists, albums and my recent listens.

_Here is a preview of the website created using VueJS and Last.fm API. You can see it in action here. Just add your Last.fm API key and your Last.fm username to see your data._

[![Preview of my Last.fm account with this project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp6tnscdvt4e3uuwvqln.png)](https://lastfmprofile.thomasbnt.dev)


## Creation of the project

To start, we will create a Vite project with Vue.js 3.

_Why Vite?_

> Vite is a build tool that aims to provide a faster and lighter development experience for modern web projects. It consists of two main parts:
> 
> - A development server that offers rich features over native ES modules, such as extremely fast hot swapping of modules (HMR).
> - A build control that bundles your code with Rollup, preconfigured to produce highly optimized static assets for production.
>
> **[Source](https://vitejs.dev/guide/#overview)**


```bash
npm create vite@latest
```

No pre-configuration needed of the project, I just use SASS in addition to the CSS. If you are doing the same thing, consider installing SASS in `devDependencies`.

```bash
npm install -D sass
```

As for the code and how sass is interpreted in the views, just declare :

```html
<style lang="scss" scoped>
...
</style>
```

And Vite will take care of everything, even the production version.

> That said, Vite does provide built-in support for `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. [Source](https://vitejs.dev/guide/features.html#css-pre-processors)

## The architecture

The architecture is specific to Vue.js 3. I simply added SASS as written above. An **.env** file where I store my Last.fm _username_ and as far as the API key is concerned, I don't store it since it will be handled with the localStorage so as not to leak the token. But in the project, I make sure that the token can be retrieved if it is available in the .env file under the value `VITE_LASTFM_KEY`.

The **.env** file : 

```python
# Required
VITE_USERNAME=thomasbnt
## Get your API key here: https://www.last.fm/api/account/create
# Caution : VITE_ prefix is required, and he show to the client your key.
VITE_LASTFM_KEY=YOUR_API_KEY

# Leave it like that if you don't want to settle anything
VITE_LASTFM_LIMIT_FOR_RECENT_TRACKS=10
```

For the rest, I use the basic components of Vue.js 3. Nothing could be simpler.

## API requests

Concerning the requests, I referred to the documentation of the Last.fm API that you [can find here](https://www.last.fm/api/intro). It is rather clear and simple to understand, in any case I had no difficulty to get the data and play with it.

For the requests, I used fetch. For example, to get my last listened songs with the method [`user.getRecentTracks`](https://www.last.fm/api/show/user.getRecentTracks) :

```js
async getUserRecentTracks() {
  if (localStorage.getItem("lastfm_key")) {
    const username = localStorage.getItem("username") ? localStorage.getItem("username") : import.meta.env.VITE_USERNAME
    const key = localStorage.getItem("lastfm_key") ? localStorage.getItem("lastfm_key") : import.meta.env.LASTFM_KEY
    const response = await fetch(
      `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${key}&limit=${this.limit}&format=json`
    )
    const data = await response.json()
    this.recentTracks = data.recenttracks
  }
}
```

Which gives us this part with the magic of Vue.js and a bit of style:

![A preview of the recent listening section created using VueJS and the Last.fm API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqps943ydnueov60nmp8.png)

You can find this component [on GitHub /src/components/RecentTracks.vue](https://github.com/thomasbnt/lastfmprofile/blob/main/src/components/RecentTracks.vue).

## Use of localStorage

As you will have seen slightly above, I use the **localStorage to store the Last.fm API key**. This allows you to keep the API key out of the source code and hide it. But it also has a drawback, which is that if you switch browsers, you won't be able to access your data anymore. To get around this problem, I added a button to retrieve the Last.fm API key and store it in the localStorage.

```diff
async getUserRecentTracks() {
+ if (localStorage.getItem("lastfm_key")) {
+   const username = localStorage.getItem("username") ? localStorage.getItem("username") : import.meta.env.VITE_USERNAME
+   const key = localStorage.getItem("lastfm_key") ? localStorage.getItem("lastfm_key") : import.meta.env.LASTFM_KEY
    const response = await fetch(
      `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${key}&limit=${this.limit}&format=json`
    )
    const data = await response.json()
    this.recentTracks = data.recenttracks
  }
}
```

## Conclusion 

Quite a short article about the use of the Last.fm and Vue.js API, but I prefer to redirect you directly to the source code. It allows understanding better its use and to see the whole code.


> The project is open source and is **[available on GitHub](https://github.com/thomasbnt/lastfmprofile)**.
> - You can **contribute** and even test it locally.
> - And directly [test on the deployment here](https://lastfmprofile.thomasbnt.dev).


___

|☕|Check my [Twitter account](https://twitter.com/thomasbnt_). You can see many projects and updates. You can also [support me on Buy Me a Coffee, Stripe or GitHub Sponsors](https://thomasbnt.dev/donate). Thanks for read my post ! 🤩|
|---|---|