Modern Websites with Vue.js

Salie Lim

© 2019 - 2020 Salie Lim

Table of Contents

1. 1.0. Introduction

1. 1.1. Why this book?

2. 1.2. Who is this book for & Prerequisites

3. 1.3. What will you learn

4. 1.4. What will you build

2. 2.0. Modern Front-end Web Development

1. 2.1. Introduction to Front-end Web Development

2. 2.2. What about the Back-end?

3. 2.3. Evolution of Front-end Web Development

4. 2.4. Disadvantages of WordPress

5. 2.5. The Modern Web & Moving away from WordPress

6. 2.6. Comparison of Front-end JavaScript Frameworks

3. 3.0. Web Dev Languages & Tools

1. 3.1. What do you need to know

2. 3.2. Your Text Editor & Environment Setup

3. 3.3. Introduction to the Command Line

4. 3.4. Introduction to HTML

5. 3.5. Introduction to CSS

6. 3.6. Introduction to Responsive Web Design

7. 3.7. Introduction to JavaScript

8. 3.8. Introduction to npm, Node.js & Setup

9. 3.9. Introduction to Git & Setup

10. 3.10. Learn more

4. 4.0. Vue.js Website with Form

1. 4.1. Introduction to Vue.js

2. 4.2. Main concepts in Vue.js

3. 4.4. Project Objectives

4. 4.5. Setup Vue.js & Nuxt.js

5. 4.6. Project Application Structure

6. 4.6. Setup Source Control

7. 4.7. Install VuePress

8. 4.8. VuePress Directory Structure

9. 4.9. Add VuePress Theme

10. 4.10. Build Static Pages

11. 4.11. Configure Routes

12. 4.12. Deploy Site to Netlify

13. 4.13. Build a Form

5. 5.0. Vue.js Website with Content Management System

1. 5.1. Introduction to Netlify CMS

2. 5.2. Project Objectives

3. 5.3. Netlify CMS Setup

4. 5.4. What is OAuth?

5. 5.4. OAuth Provider Setup

6. 5.5. Conclusion

6. 6.0 Conclusion

1. 6.1. What you’ve learnt

2. 6.2. Projects recap

3. 6.3. Idea for further enchancements

4. 6.4. Moving forward

5. 6.5. Additional resources

6. 6.6. Goodbye

1.0. Introduction

1.1. Why this book?

Welcome to Modern websites with Vue.js. In this book I am going to show you how to build state-of-the-art static websites using the latest technology stack.

In this day and age there’s an abundance of resources but you have limited time and you’re forced to choose resources carefully. This course brings together fragmented sources to give you a complete but concise guide to building a modern website from scratch. This resource will not only show you how to do something but also explain why. We will utilise best-practice templates to speed up the website development process. In a matter of hours you would have coded and deployed your first static site built with a modern JavaScript library.

1.2. Who is this book for & Prerequisites

This book is for complete beginners, as well as web designers and WordPress developers who want to explore emerging technologies, as well as seasoned back-end developers who want to dip their toes in the front-end world. You may be a marketer looking to build landing pages or a business owner building a website. This book will assume that you’ve no prior knowledge of web development and guide you through the basics of HyperText Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript, Git and the Command Line. Feel free to skip to Chapter 4 if you have basic web development knowledge and dive straight into building sites with Vue.js and React.

1.3. What will you learn

By the end of the book you would have a good understanding of front-end static website development. You’ll be able to build an entire site, hook it up to a content infrastructure and deploy it to your very own domain. You can build this site for your portfolio or business.

This book walks you through building a modern website from start to end. I will give an introduction to the library we will be using and walk you through the setup. Then I will explain the project folder structure and best practices of where to write your code. Styling and customising the website will be covered too.

Having worked through this book you would have future-proofed your web development skills. The world of web development is moving towards websites that load instantly and are silky smooth to browse. This book uses the latest technologies to give you a good foundation to build upon knowledge as technology trends change.

1.4. What will you build

In the end there will be two projects that you will build and publish publicly.

In Chapter 4 you’ll build a website with static pages and a form. Vue.js will be the JavaScript library we will be using to build our modern website. We will make content accessible via Contentful APIs and editable in a CMS-like web app. Then the site will be deployed on Netlify and you can add your custom domain to it.

In Chapter 5 you’ll build a static website with React and Gatsby. Netlify CMS will be used to provide an interface for editing content on the website. GraphQL will be used to fetch the content to be displayed on the webpage. In the end, you’ll have your own production-ready website, which you will deploy.

2.0. Modern Front-end Web Development

2.1. Introduction to Front-end Web Development

Front-end web development involves creating the graphical interface for users to view and interact with webpages.

The three languages used on the Front-end are HTML, CSS and JavaScript. They make up the client-side code that is rendered on your internet browser. Now Front-end JavaScript frameworks like React, Angular and Vue.js are used to build sites faster and they are optimised for user load speeds.

2.2. What about the Back-end?

Back-end web developers on the other hand are responsible for server-side application logic. Information like site content is served from the database in the back-end and integrated into the user interface on the front-end.

2.3. Evolution of Front-end Web Development

Website development have come a long way. In the beginning, web pages only show text. It was only in the mid 90’s that graphics and animated GIFs made its appearance on the web.

In 1998, Macromedia Flash and Fireworks was all the rage for creating webpages with animations and graphics. By the early 2000s, CSS was used widely to style webpages.

In 2007, Apple released the iPhone and smartphone usage took off. Websites were expected to work well across devices of varying sizes. Responsive web design is now an important aspect of web development.

In the same year WordPress, a free and open-source content management system (CMS) based on PHP and MySQL grew in popularity. It now powers 30% of all sites on the Internet, including about 15% of the top 100 websites in the world.

2.4. Disadvantages of WordPress

WordPress is easy to setup and customise. However it also has disadvantages. WordPress has numerous constant updates that render parts of your site usable. Site owners have to constantly troubleshoot and maintain their WordPress sites.

It is also the most hacked CMS platform on the internet. Security is an issue as WordPress relies heavily on plugins and themes for customisation. These plugins and the themes are not monitored and they can easily contain bugs or malicious code.

The worst of all, WordPress websites can be slow and bloated with unnecessary code from plugins and themes. The editor in WordPress generates bad HTML as well.

Even though WordPress is opensource and free, it isn’t really. There are significant costs to WordPress sites like hosting, paying for plugins and themes for customisation.

2.5. The Modern Web & Moving away from WordPress

Over the past few years several new front-end technologies emerged. The web development landscape has shifted radically towards the JAMstack, a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

It is now easier but much more technical to build websites. Modern JavaScript libraries can greatly improve the speed and efficency of building websites while maintaining a well-organised and scable codebase. They provide a better developer experience

JAMStack sites delivers reliable sites that load instantly even in uncertain network conditions. Such sites respond quickly to user interactions with silky smooth animations like a native app. They have higher security and lower cost of scaling.

On the back-end, modern websites are API-centric, data can be consumed via web, mobile app, in multiple formats and mediums. WordPress was built with website content in mind, not content across multiple devices and platforms. We will be using Contentful API on the back-end to serve content to be displayed on the browser.

In the end you’ll be better off with a website built from scratch using a modern Javascript framework like Vue.js or React with content served via an API.

2.6. Comparison of Front-end JavaScript Frameworks

It used to be that JavaScript and JQuery were used for the front-end, nothing else. However in last few years the landscape has been flooded with JavaScript frameworks. Every few months a new JavaScript library pops up.

How do you know which framework to use then? It ultimately depends on your project needs. In this book we are building a simple static website so we only need a simple library that is easy for beginners to pick up. The Vue.js learning curve is shallow compared to other frameworks out there like Angular and React. It is simpler, less complex and easy to setup. Vue’s documentation also uses layman’s terms and is easy for beginners to understand.

Now that you understand the basics of web development we will get started on writing some basic code in the next chapters.

3.0. Web Dev Languages & Tools

3.1. What do you need to know

There is a ton to learn in web development and there is always new things that you feel like you should know. However it is impossible to know everything, especially at the start. It is a gradual process of knowledge accumulation. The best approach to not feel overwhelmed is to do just-in-time learning. Take baby steps and learn something as you need it.

This chapter is the place to start learning the very basics. I will go through with you web developer fundamentals of the languages and tools that we will be using to build static JAMStack websites. I will cover three essential tools - the text editor, Unix command line, and version control with Git. Also, I will go through the three languages of front-end development - HTML, CSS and JavaScript. By the end of this chapter you would have the essential knowledge to build a basic webpage.

3.2. Your Text Editor & Environment Setup

Using a text editor is the most essential skill when learning web development. A text editor is used for code, markup, configuration files, and much more.

I use the Visual Studio editor, which I find easy to use and I enjoy the in-built terminal. However you may use Sublime Text, Atom, or any other editor you feel comfortable with.

In this book I will be providing instructions specific to a Linux-based OS (for example, Ubuntu and MacOS). If you are on Windows you may wish to run a free Linux virtual machine Oracle VM VirtualBox or use Cloud9 which provides a pre-configured workspace environment. Non-Unix OS like Windows can sometimes cause friction.

Setup your environment and download a text editor. We will start writing code on the text editor in Chapter 3.4.

3.3. Introduction to the Command Line

The command-line interface (CLI) is an interface where the user types commands that tell the computer to perform tasks.

On macOS open the terminal by launching Spotlight (typing ⌘␣ Command-space) and then type “terminal” in the search bar to start the terminal window. On Linux click the terminal icon and it will be launched.

We will be using the terminal to install the JavaScript libraries and packages that we will be using, launch a preview of the website that we are building and much more.

3.4. Introduction to HTML

HTML stands for Hyper Text Mark-up Language, it is the universal language of the World Wide Web and nearly all webpages are written with the markup language.

In spite of its complicated name, it is actually very simple. All you need to know about its syntax is that commands are typed within triangular brackets < > called tags. You would enclose text or elements with tags to make it appear a certain way.

Here is how you start a tag to wrap the text in a paragraph (p stands for paragraph)

1     <p>

And here is how you end a tag by add a / after the first <

1     </p>

This is how you would use it to wrap around a phrase to dicate that it is a paragraph

1     <p>Hello World</p>

There are however a few exceptions that do not need to be ended, so take note of that.

For this section let us create a simple personal webpage that displays links to your social media profiles. Create a file with your text editor and name this file “my-profile.html”. We will write HTML in this file.

First start off with the webpage heading, H1 is heading 1 the primary heading.

1     <h1>Joe Cat</h1>

Then add a secondary heading, H2 is heading 2

1     <h2>The cool cat</h2>

Add an image next, the value of the image url resides in the tag between the double quotes

1     <img src="coolcat.jpg">

And a paragraph,

1     <p>Welcome to my webpage, click on the links to visit my social media profiles</\
2 p>

Add your link text in the format of bullet points. The tags start the collection of bullet points, and the indented tags enclose each bullet point.

1     <ul>
2       <li>FaceBook</li>
3       <li>Instagram</li>
4       <li>Twitter</li>
5     </ul>

Finally link up the text, start the link by using <a href="..."> & end with </a> tag.

1     <ul>
2       <li><a href="...">FaceBook</a></li>
3       <li><a href="...">Instagram</a></li>
4       <li><a href="...">Twitter</a></li>
5     </ul>

Here’s the full code for the webpage

1     <h1>Joe Cat</h1>
2     <h2>The cool cat</h2>
3     <img src="coolcat.jpg">
4     <p>Welcome to my webpage, click on the links to visit my social media profiles</\
5 p>
6     <ul>
7       <li><a href="...">FaceBook</a></li>
8       <li><a href="...">Instagram</a></li>
9       <li><a href="...">Twitter</a></li>
10     </ul>

Open the webpage by opening the file with your internet browser and there you have your first webpage.

3.5. Introduction to CSS

Our webpage is pretty boring so let’s style it with CSS. CSS stands for Cascading Style Sheets, it is a language that describes how HTML elements should be displayed. CSS can be in a separate file and loaded in the HTML, or used inline in the HTML file between the

tags. In this book we will write inline CSS for simplicity sake.

CSS allows you to style text fonts, boldness, italics, line and letter spacing, text drop shadows, and more. Let’s style the heading text on the webpage we coded on the previous section.

We will make the text colour navy, give it a font size of 2ems (this measurement means 2 times the size of the current font) and use the arial font.

1     <h1>Joe Cat</h1>
2
3     <style>
4       h1 {
5         color: navy;
6         font-size: 2em;
7         font-family: arial;
8       }
9     </style>

CSS syntax goes like this, the selector, for example, “h1” points to the HTML element you want to style. A declaration block is enclosed between the brackets and contains one or more style declarations separated by semicolons.

CSS also dictates the look of containers and boxes on a webpage, setting margins, borders, padding and more. We will enclose the paragraph on our webpage in a box. The paragraph is assigned the class “box” in the HTML tag. In CSS, a class is a selector used to select the elements you want to style. Then between the style tags I will define the look of the box border. I use “.box”, the dot indicates that I’m selecting a class.

1     <p class="box">Welcome to my webpage, click on the links to visit my social medi\
2 a profiles</p>
3
4     <style>
5       .box {
6         border: 1em solid blue;
7       }
8     </style>

There are plenty of attributes that you are able to change with CSS but I will not be covering all of them. They will be introduced as we go along in the next chapter as we build our JAMStack website. For now, understanding the syntax of CSS is a great foundation to build upon more knowledge.

3.6. Introduction to Responsive Web Design

Responsive web design is the art of designing websites that respond to the user’s behaviour and device. There are phones, tablets and desktops of differing screen size and orientation.

HTML and CSS are used to resize, hide, shrink, enlarge, and move the content to make it look good on any screen. This can be quite frustrating to accomplish and in the next chapter when we build our PWA site I will show you how using CSS frameworks and media queries.

3.7. Introduction to JavaScript

JavaScript is a dynamic but lightweight programming language. It is used in the client-side to interact with the user and make webpages dynamic. JavaScript is an object-oriented programming language.

JavaScript is a huge topic in itself and you probably need to invest a few months to really understand how to use it and understand its quirks and idiocracies.

Thankfully for static websites we do not need full knowledge of JavaScript. I will go through JavaScript concepts in the context of Vue.js as we go along building the website in the next chapter. After all, examples are often easier to understand than text explanations.

3.8. Introduction to npm, Node.js & Setup

npm is the package manager for JavaScript. With npm JavaScript developers can search and use packages of reusable code. npm serves as a collection of free, reusable code used as building blocks to be assembled into powerful applications.

We use npm in this book to install code packages to build your site on, this speeds up the development process. Also, npm allows dependencies to be managed easily in the project. We will use npm packages from Vue.js and more to build our website.

npm is installed with Node.js, which means that you have to download Node.js to get npm installed on your computer. We will now install npm on your machine.

First, confirm that you do not already have npm installed by running this command in your terminal.

1     $ npm -v

If you already have npm installed you would see the version number installed on your terminal. You can update your npm to ensure you have the latest npm version by type this into your terminal.

1     $ npm install npm@latest -g

If you do not have npm installed, get both npm and Node.js (they come together) by visiting the Node.js downloads page (Download | Node.js) and selecting the latest LTS version option as well as your operating system. Run the downloaded installer, go through the steps and you are finished.

To ensure that Node.js has been installed, run this in your terminal

1     $ node -v

To ensure that npm has been installed, run this in your terminal

1     $ npm -v

You should get something close to these, although your version number could be different.

1     $ npm -v
2     v8.11.1
3
4     $ npm -v
5     6.0.1

3.9. Introduction to Git & Setup

Git is a version control system to track changes in files and coordinate work on those files among multiple developers. It keeps track of modifications to the code. If a mistake is made, comparison to earlier versions of the code and the mistake can be fixed. This minimises disruption to all development teams.

In this book we will be using a web-based Git-repository manager for version control. A few popular providers include GitHub, GitLab and Bitbucket. I will be using GitLab in the book as it is free for both private and public repositories. GitHub is free for public repositories but charges for private ones. BitBucket is free for private repositories but charges for public ones.

To start using GitLab, simply sign up for an account at https://gitlab.com. You will then create new projects and push code to your Git account in the next chapters.

3.10. Learn more

I covered just the basics that you need to know for the next chapters so as not to overwhelm. There is definitely more to it and I would recommend reading the Learn Enough to Be Dangerous series of guides by Michael Hartl Learn Enough to Be Dangerous should you want to learn more.

4.0. Vue.js Website with Form

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.1. Introduction to Vue.js

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.2. Main concepts in Vue.js

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.4. Project Objectives

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.5. Setup Vue.js & Nuxt.js

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.6. Project Application Structure

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.6. Setup Source Control

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.7. Install VuePress

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.8. VuePress Directory Structure

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.9. Add VuePress Theme

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.10. Build Static Pages

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.11. Configure Routes

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.12. Deploy Site to Netlify

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

4.13. Build a Form

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.0. Vue.js Website with Content Management System

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.1. Introduction to Netlify CMS

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.2. Project Objectives

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.3. Netlify CMS Setup

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.4. What is OAuth?

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.4. OAuth Provider Setup

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

5.5. Conclusion

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.0 Conclusion

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.1. What you’ve learnt

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.2. Projects recap

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.3. Idea for further enchancements

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.4. Moving forward

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.5. Additional resources

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.

6.6. Goodbye

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/modern-websites-vuejs.