The javascript portion of the Projects component for Net Your Problem.

projects_script.vue

<script>
import axios from 'axios';
import VueMarkdown from 'vue-markdown';

import Card from './material-components/Card';
import ScrollDownToSection from './ScrollDownToSection';
import Timeline from './Timeline';
import SimpleModal from './dialogs/SimpleModal';

const contentRepositoryApiBaseUrl = process.env.CONTENT_REPOSITORY_API_BASE_URL;

export default {
  name: 'projects',
  components: {
    card: Card,
    'scroll-down-to-section': ScrollDownToSection,
    timeline: Timeline,
    'vue-markdown': VueMarkdown,
    modal: SimpleModal
  },
  props: ['nextSectionHref'],
  methods: {
    scrollToElement(target) {
      this.$emit('scrollToElement', target);
    },
    getProjectContentUrl(page) {
      return `${contentRepositoryApiBaseUrl}/projects/${page}.json`;
    },
    async showProjectDetails(project) {
      const projectUrl = this.getProjectContentUrl(project);
      const response = await axios.get(projectUrl);
      this.projectTitle = response.data.title;
      this.markdownSource = response.data.description;
      this.showModal = true;
    }
  },
  async created() {
    const response = await axios.get(`${contentRepositoryApiBaseUrl}/lists/projects.json`);
    const projects = response.data.cards;
    projects.forEach((project) => {
      this.projects.push({
        text: project.cardTitle,
        cover: project.cardImage,
        detailedInformationFileName: project.detailedInformationFileName
      });
    });
  },
  data() {
    return {
      showModal: false,
      projects: [],
      projectTitle: '',
      markdownSource: ''
    };
  }
};
</script>