Vue

⏱ This tutorial should take less than 5 minutes.

Hello there, Beginner!

This tutorial shows you how Begin's Vue example app uses the Vue front-end framework to talk to a cloud function-based API.

✋🏽 You will need git, node.js and a GitHub account to follow along.

---

Create your Vue app

Click the Deploy to Begin button below.

Name your app and click the 'Create...' button to have Begin create a new app and GitHub repo.

Check out your apps' activity feed!

Now click the Staging link in the upper left corner to see your app running in your staging environment.

You should see something like the image below:

Right on!

Now go back to Begin and follow the prompts on the intro cards to see the system in action.

💡 Learn more about CI/CD environments

---

Project structure

If you followed the intro cards in the activity view you are ready to review your project's structure on your local machine.

.
├── api/
│   └── index.js
├── dist/
├── public/
├── src/
│    ├── assets/
│    ├── components/
│    ├── App.vue
│    └── main.js
└── test/

Let's go over each of these directories to see how they are used.

api/

This directory contains a handler function for the API. The handler function defined in api/index.js returns a response when HTTP requests are made to /api

dist/

This is where Vue puts static assets during compilation.

public/

This directory is where the Vue template for index.html is stored.

src/

This directory is where all of the apps' source files are kept.

src/App.vue

This file is where the specific code for the app resides.

Vue uses single file components. This means that the component has template, script and style tags for defining the structure, behavior and styling all in one file.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :message="message"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data: function () {
    return {
      message: 'Loading...'
    }
  },
  components: {
    HelloWorld
  },
  methods:  {
    getData: async function () {
      try {
        let data = await (await fetch('api')).json()
        this.message = data.message
      } catch (err) {
        this.message = err.message
      }
    }
  },
  mounted: function () {
    this.getData()
  }
}
</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>

Let's go over what we see in this App.vue file.

template

The template tag contains the HTML template that will be used to render the general component with specific state.

script

The script tag is where the components' behavior is defined.

This App component leverages Vue built-in component properties of name, data, components, methods and mounted to define its behavior.

Let's quickly review what these properties are doing.

components

App.vue exposes the HelloWorld component in the components array in order to use it in its template.

data

The data property returns an object defining the components default data state. In this case the data object contains a message property with the default text of '...loading'

methods

This component defines a getData function that makes a GET request to the /api endpoint when called.

mounted

Mounted is called when the component is added to a page in the browser. This component calls its getData function when it is added to the page.

💡 Learn more! Go here to learn more about using components in Vue.

main.js

This file is the entry point for Vue. It renders the App.vue component into the page.

src/test/

Your Vue project comes built-in with a few boilerplate tests in /test/example.spec.js.

💡 Learn more! Use the Vue CLI to explore other scaffolding for your Vue app.

---

Congratulations!

You've now got a shiny new Vue app hosted on Begin – nice work.

Now go show it off – people need to see this thing!

---

Additional resources

• Expand the capabilities of your app:
  • Creating new routes
  • Add Begin Data
• Begin reference docs
• Get help:
  • Begin community
  • Issue tracker
• More about Vue
  • Vue docs
  • Vue CLI
  • Vue forum
  • What Is Vue JS?
  • Vue JS Crash Course