AbraXabra

import Vue from 'vue'
import Router from 'vue-router'
import Artists from './components/Artists.vue'
import Tracks from './components/Tracks.vue'

Vue.use(Router)
export default new Router({
	mode: 'history',
	routes: [
		{

AbraXabra

const path = require('path')
module.exports = {
  chainWebpack: config => {
    const apiClient = process.env.VUE_APP_API_CLIENT // mock or server
    config.resolve.alias.set(
      'api-client',
      path.resolve(__dirname, `src/api/${apiClient}`)
    )
  }
}

AbraXabra

import axios from 'axios'
export default {
  fetchPosts () {
    return axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.data)
  }
}

AbraXabra

import posts from './data/posts'
const fetch = (mockData, time = 0) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockData)
    }, time)
  })
}
export default {
  fetchPosts () {

AbraXabra

[
  { "title": "Post Title 1" },
  { "title": "Post Title 2" },
  { "title": "Post Title 3" },
  { "title": "Post Title 4" },
  { "title": "Post Title 5" }
]

AbraXabra

import Vue from 'vue'
import Vuex from 'vuex'
import client from 'api-client'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    setPosts (state, posts) {

AbraXabra

<template>
  <div class="home">
    <ul class="posts">
      <li
        v-for="post in posts"
        :key="post.title"
        class="post-item"
      >
          <h1>{{ post.title }}</h1>
      </li>

AbraXabra

export default function () {
  // Nuxt resolves .ts extension
  this.nuxt.options.extensions.push('ts')

  // Extend webpack build
  this.extendBuild(config => {
    // Add ts-loader to import .ts
    config.module.rules.push({
      test: /\.ts$/,
      loader: 'ts-loader',

AbraXabra

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,

AbraXabra

.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.grid > span {
    padding: 8px 4px;
    border-left: 1px solid black;