VUE JS - SAMPLE COMPONENT - POSTS.VUE - GLOBAL AND LOCAL DECLARATIONS

gistfile1.txt

<template>

  <ul>
    <li v-for="item in ninjas">{{ item }}</li>
  </ul>


</template>

<script>
export default {
  data () {
    return {
      title: 'Ninja App',
      ninjas: ['aaa', 'bbb', 'ccc']
    }
  },
  methods: {
    greeting: function() {
      return 'This is a test method';
    }
  } 
}
</script>

<style lang="scss">

ul {
  border: 4px dotted red; 
}


</style>

#######################
GLOBAL declaration
#######################
MAIN.JS

import Vue from 'vue'
import App from './App.vue'
import Posts from './components/Posts.vue'

Vue.component('posts', Posts)

new Vue({
  el: '#customer-spa',
  render: h => h(App)
})

####################
LOCAL declaration
####################
APP.VUE

<template>
  <div id="customer-spa">

    <h1>{{ title }}</h1>
    <h2>{{ greeting() }}</h2>

    <posts></posts>
    
  </div>
</template>

<script>

import Posts from './components/Posts.vue' 

export default {
  components: {
    'posts': Posts
  },
  data () {
    return {
      title: 'Your first Vue file, wooo!'
    }
  },
  methods: {
    greeting: function() {
      return 'This is a test method';
    }
  } 
}
</script>

<style lang="scss">

#customer-spa {
  border: 1rem solid white;
  min-height: 500px; 
}


</style>