first

package.json

@@ -8,16 +8,22 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "postcss-loader": "^5.2.0",
     "vue": "^2.6.11"
   },
   "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.0.4",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "autoprefixer": "^9",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "postcss": "^7",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
@@ -26,8 +32,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
+      "plugin:vue/essential"
     ],
     "parserOptions": {
       "parser": "babel-eslint"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,28 +1,44 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app" class="container max-w-5xl mx-auto mt-20">
+    <h1 class="text-4xl font-bold">Adresslist</h1>
+    <list v-for="( addresse, idx ) in addresses"
+          :key="idx"
+          :idx="idx"
+          :list="addresse">
+          </list>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import EventBus from './libs/EventBus'
+import Api from './libs/api.js'
+import List from './components/List.vue'
 
 export default {
   name: 'App',
+  data() {
+    return {
+      addresses: []
+    }
+  },
+  created() {
+
+    EventBus.$on( 'change-color', (id) => {
+      console.log( 'change-color', idx )
+      EventBus.$emit( 'new-color', { idx: idx, color: 'bg-green-400' } )
+    })
+
+    EventBus.$on( 'delete-address', idx => {
+      this.addresses.splice( idx, 1 )
+    })
+
+    Api().get('/address/random_address?size=10')
+    .then( response => {
+      this.addresses = response.data
+    })
+  },
   components: {
-    HelloWorld
+    List
   }
 }
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/List.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="border-gray-900 border-2 p-10 m-10"
+       :class="color">
+    <div class="mb-4">
+      {{ list }}
+    </div>
+    <button @click="delete_item" class="p-2 bg-red-600 text-white">Delete</button>
+    <button @click="change_color" class="ml-2 p-2 bg-blue-400 text-white">Change color</button>
+  </div>
+</template>
+
+<script>
+import EventBus from '../libs/EventBus'
+export default {
+  name: 'List',
+  props: {
+    list: Object,
+    idx: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      color: 'bg-white'
+    }
+  },
+  methods: {
+    change_color() {
+      EventBus.$emit( 'change-color', this.idx )
+    },
+    delete_item() {
+      EventBus.$emit( 'delete-address', this.idx )
+    }
+  },
+  created() {
+    EventBus.$on( 'new-color', data => {
+      if( this.idx === data.idx ) {
+        this.color = data.color
+      }
+    })
+  },
+}
+</script>

src/libs/EventBus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+
+export default EventBus

src/libs/api.js

@@ -0,0 +1,28 @@
+import Axios from "axios";
+
+export default () => {
+  // var token = document.getElementsByName("csrf-token")[0].getAttribute(
+  //   "content",
+  // );
+  const AxiosInstance = Axios.create({
+    baseURL: "https://random-data-api.com/api/",
+    // withCredentials: true,
+    headers: {
+      "Content-Type": "application/json",
+      "Credentials": "same-origin",
+      "Accept": "application/json",
+      // "X-CSRF-Token": token,
+    },
+  });
+  AxiosInstance.interceptors.response.use((response) => {
+    return response;
+  }, function (error) {
+    // console.log('Axios interceptor ....')
+    if (error.response.status === 401) {
+      // console.log('unauthorized, logging out ...')
+      window.document.location.href = "/";
+    }
+    return Promise.reject(error.response);
+  });
+  return AxiosInstance;
+};

src/main.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+import './stylesheets/main.css'
+
 Vue.config.productionTip = false
 
 new Vue({

src/stylesheets/main.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+
+body {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* text-align: center; */
+  @apply font-normal;
+  @apply text-gray-600;
+  @apply text-lg;
+
+  address {
+    @apply not-italic;
+    @apply leading-tight;
+  }
+}
+
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: 'media', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}