Vue Starter

#global install
npm install -g @vue/cli

#check version
vue --version

#create app
npm create NameOfApp

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

Axios parse json array using v-for

Axios : Parse external 3rd party json

Parse local json data

VUE 3.0 : Parsing External Json

...

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->

 

    <div><Header menu="menu"/> |<Header menu="masakan"/> |<Header menu="thai"/></div>
    <!-- <p>{{tasks.title}}</p> -->
 
    <HelloWorld content="Welcome to Your Vue.js App" />
    <HelloMuhaza  content="Muhaza On Work"/>
    <myComponent content="This part of component"/>

    <!-- parsing from external api -->
    <ul v-if="posts && posts.length">
      <li v-for="post of posts" v-bind:key="post.id">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>
  </div>
</template>

<script>

import HelloWorld from "./components/HelloWorld.vue";



export default {
  name: "app",
  //axios start here
  data () {
    return {
      posts: []
    }
  },
  created() {
    axios.get('http://jsonplaceholder.typicode.com/posts').then((response) => {
      this.posts = response.data
    })
    .catch((e) => {
      console.error(e)
    })
  },

  components: {
    HelloWorld,
  }
};



</script>

<style>
</style>

Form: Get Value from selected data

Fetch/parse API/json using axios in vuejs