simonjcarr

// /server/main.js
import { Meteor } from 'meteor/meteor';
import '/imports/api/hobbies'

Meteor.startup(() => {
  // code to run on server at startup
});

simonjcarr

<template>
  <div>
    <div>Hobbies Component</div>
    <div>My Hobbies</div>
    <ul>
      <li v-for="hobby in hobbies" :key="hobby._id">{{hobby.hobby}}</li>
    </ul>
  </div>
</template>

simonjcarr

<template>
  <div>Hello World</div>
</template>

simonjcarr

<template>
  <div>{{ greeting }}</div>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Hello World"
    };

simonjcarr

<template>
  <div>
    <div>{{ greeting }}</div>
    <div>
      The original number is: <strong>{{ myNumber }}</strong>
    </div>
    <div>
      The computed property makes it: <strong>{{ addOne }}</strong>
    </div>
  </div>

simonjcarr

<template>
  <div>
    <div>{{ greeting }}</div>
    <div>
      The original number is: <strong>{{ myNumber }}</strong>
    </div>
    <div>
      The computed property makes it: <strong>{{ addOne }}</strong>
    </div>
    <div>

simonjcarr

methods: {
    getPerson(id) {
      fetch(`https://swapi.dev/api/people/${id}`)
        .then(response => response.json())
        .then(data => {
          this.swPerson = data;
        });
    }
  }

simonjcarr

personName() {
      if (this.swPerson) {
        return this.swPerson.name;
      }
      return null;
    }

simonjcarr

Person name: {{ personName }}
      <button
        class="p-1 text-xs font-bold bg-blue-600 text-white shadow rounded hover:bg-blue-700 mt-8"
        @click="getPerson(1)"
        v-if="!personName"
      >
        Fetch Person
      </button>

simonjcarr

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}