Dirk94

async mounted() {
  // Use a relative path to call the API now since our request is proxied.
  const response = await axios.get("/quote")
  this.quote = response.data.quote;
}

Dirk94

module.exports = {
    devServer: {
        // This will forward any request that does not match a static file to localhost:3000
        proxy: 'http://localhost:3000'
    }
}

Dirk94

app.get('/quote', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:8080');
    res.send({
        quote: "The way to get started is to quit talking and begin doing."
    });
})

Dirk94

<template>
  <div id="app" style="font-size: 24px;">
    <p>Quote of the day:</p>
    <p>
      {{ quote }}
    </p>
  </div>
</template>

<script>

Dirk94

actions: {
  async addTodo({ commit }, todo) {
    // This is a fake function to illustrate the example.
    const response = await postRequestToTheAPI(todo);
    if (response.isOk) {
      commit('ADD_TODO', todo);
    }
  }
}

Dirk94

<template>
  <div id="app">
    <h1>Todo App</h1>
    <input type="text" @keyup.enter="addTodo()" v-model="message" placeholder="Add a to-do">
    <ul>
      <li v-for="todo in todos" :key="todo.message">
        {{ todo.message }}
      </li>
    </ul>
  </div>

Dirk94

<template>
  <div id="app">
    <h1>Todo App</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.message">
        {{ todo.message }}
      </li>
    </ul>
  </div>
</template>

Dirk94

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // This is the state of the application.
  state: {
    todos: [
      {

Dirk94

<template>
  <p>Your name is {{ name }}</p>
</template>
<script>
export default {
  data() { return {
    name: "Dirk",
  } },
}
</script>

Dirk94

FROM node:12-slim

# Create an app directory in the docker
WORKDIR /app

# Copy the package.json and package-lock.json. 
COPY package*.json ./

# Install production dependencies.
RUN npm install --only=production