Getting Started With Vue and Vapor

Vue.js, or Vue, is a Frontend JavaScript Framework. While regular HTML and JavaScript projects require a lot of hardcoding or JavaScript for dynamic interactions, Vue provides declarative rendering and a component system to simplify building interactive websites.

In this tutorial, you’ll learn the basics of Vue by creating a guessing game. The game shows the user five programming article titles from around the internet and asks them to guess which is from raywenderlich.com.

A pre-built Vapor backend will gather the article titles and provide the game logic. You’ll focus on building a frontend app using Vue.

Finally, you need Xcode 12, Swift 5.3 or newer and the Vapor Toolbox to run the Vapor backend. If you’re new to Server-Side Swift and Vapor, check out Getting Started with Server-Side Swift with Vapor 4.

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of this tutorial.

It’s recommended you install Vue with npm, or Node Package Manager. npm is a package manager for JavaScript projects. You can learn more here.

Open Terminal to install the necessary tools. Feel free to skip the steps for installing any software you already have.

First, you’ll install NPM.

Installing NPM

nvm is a tool for installing and managing different Node.js versions. It lets you install Node modules globally without requiring admin privileges.

Run the following command to install nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Close and then open Terminal. Install npm by running:

nvm install node

Note that installing the NodeJS tools can take a while to complete.

Next, you’ll install the Vue CLI.

Installing the Vue CLI

With Node installed, you can use npm to manage your web apps’ dependencies. In this tutorial, you’ll use Vue’s official CLI, or Command Line Interface, to set up your project. It’s like Vapor Toolbox, but for Vue!

In Terminal, run the following to install the Vue CLI:

npm install -g @vue/cli

Here:

• npm install installs a package.
• -g specifies that the package will install globally on your system, not just in the current project.
• @vue/cli will install the Vue CLI from the npm repository, https://npmjs.com.

Now you’re ready to create your project!

Creating a Project

With Vue CLI installed, navigate to a directory using the command line where you’ll create your new project:

mkdir my-project
cd my-project

Then, run the following command to create a project:

vue create rw-guesser

When prompted, select Vue 3. You can also select npm as your package manager if prompted. The CLI will download all of the necessary tools and dependencies, then create a project in a new directory named rw-guesser.

With the project set up, run these commands:

cd rw-guesser
npm run serve

The first command takes you into the project directory created by the Vue CLI. The second command starts a dev server, watches for any changes in your codebase and rebuilds your code. Most of the time, it can also reload the website. The tool shows the address where you’ll find the project, so you don’t need to guess!

Open the website. You’ll see the following page:

Installing Bootstrap and Axios

When developing a web app, CSS code helps you style your app’s appearance. A variety of libraries make this easy. In this tutorial, you’ll use Bootstrap, a framework that provides many out-of-the-box tools to help you quickly design and build responsive websites.

Additionally, you’ll use axios as an HTTP client, giving you a high-level API to make HTTP calls from your frontend app to your Vapor backend.

Install the packages with npm by running:

npm install axios bootstrap

Your project now has all of its dependencies!

Project Structure

Before you begin, review your project’s folder structure.

When working with npm-based projects, node_modules contains your dependencies.

package.json contains your project manifest, listing all dependencies. As you may have guessed, package-lock.json locks onto specific versions of dependencies.

When the Vue CLI set up your project, it also created several directories.

public contains the basic HTML boilerplate of this template. Open index.html to see how it’s set up by default in Vue projects. The most important aspect to notice is its body, which contains a main app div tag with an id set to "app".

src contains your JavaScript files and Vue components. To understand the basics of how a Vue app works, open main.js in src.

Notice a Vue app is created and mounted on the tag with an "app" id, which corresponds to the main app div you observed above. This is how Vue initializes itself on the DOM.

The default project mounts a single component called App, defined in App.vue.

Now that you know what a Vue project looks like, it’s time to start writing code!

Listing Titles

Open App.vue, which defines this project’s root component.

Vue component files have at least two sections: template and script.

The template section declaratively defines the component’s layout. You can use standard HTML and Vue components defined in other files to compose your app’s layout.

The script section defines the components’ functionality. You can import Vue components from other files and use standard JavaScript features like bootstrap imported libraries.

Notice the default App component currently imports the HelloWorld.vue component.

Understanding Components

A component provides a way to separate the functionality of a large, complex web app into smaller, reusable pieces. You create your desired functionality and visual elements by composing multiple small components into a single complex app.

Before you create your components, it’s important to understand their structure. Take a look at the following template from App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

This code defines the component’s structure. It looks similar to how you might do it in regular HTML. But with Vue, HTML is just the beginning!

In this template, a standard HTML image tag displays the Vue logo. However, the next tag isn’t a regular HTML element. Instead, this element represents a Vue component, defined and imported from another file.

The definition of a Vue component’s template goes hand-in-hand with its JavaScript implementation.

You guessed it! It’s time to analyze the script section.

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

In the script section, you can import libraries or other components. This definition simply contains an import of the HelloWorld component. More importantly, this is where you export your component’s definition.

Now, it’s time to create the basic layout.