Web page for the search and reproduction of songs, through the use of the Spotify api

Web page for the search and reproduction of songs, through the use of the Spotify api

Web page for the search and reproduction of songs, through the use of the Spotify api. Designed for Vue.js course, using Eslint, Babel, Bulma and Vue-router

Novel Music

App Designed for Platzi's Vue.js course 

Getting Started

In order to run the project locally

Change of routes

Edit the src / routes.js file

# Change routes depending on whether it is for development or production
const routes = [
  {path: ' / ' , component: Search, name: ' search ' },
  {path: ' / about ' , component: About, name: ' about ' },
  {path: ' / track /: id ' , component: TrackDetail, name: ' track ' },
  {path: ' / 404 ' , component: PageNotFound},
  {path: ' / * ' , redirect: ' / 404 ' }

Edit the index.html file

   < title > Novel Music < / title > 
  < link rel = " shortcut icon " href = " /src/assets/logo-icon.png " type = " image / x-icon " >
< / head > 
< body > 
  < div id = " app " > </ div > 
  < ! - Cambiarī¸ Change the Url depending if it is for Development or Production - > 
  < script src = " /dist/build.js " > </ script > 
< / body >

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost: 8080
npm run dev

# build for production with minification 
npm run build

CLI and Dev Tools


ESLint Config for JavaScript Standard Style, see in docs for eslint-config-standard .

# Install Eslint
npm i -D eslint

# If you want to set up the config manually, run the following command:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

# Install the loader 
npm i -D eslint-loader


PUG allows us to create HTML with another type of syntax, writing less code, and through webpack to compile it to work in the browser.

npm i -D pug pug-loader


CSS framework

npm i -S bulma


It allows working with nested routes, it is modular, it allows creating routes with parameters and it allows applying transitions to routes

# Install vue-loader
npm i -S vue-router

# Then just add in the routes.js file the routes that are needed

For detailed explanation on how things work, consult the docs for vue-loader .


  • Roque Alarcon - Initial work - Roque363


For more details see the Platzi VueJS Course .

Download Details:

Author: roque363

Live Demo: https://roque363.github.io/novel-music/

GitHub: https://github.com/roque363/novel-music

vuejs vue vue-js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router