O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Forming .vue files

We have seen how a single file component looks like and how it is used in a project. It is time to create a few, in a real-life scenario. Assume we want to create some kind of social network or forum, where users post their stories and experiences. To create our startup, we are going to need 2 forms, one for registration and login, and one page to display users' stories.

Before we begin, we'll include Bootstrap globally in order to be able to use its styles within all our components. To do so, we have to update our index.html file:

index.html:

<html> <head> <meta charset="utf-8"> <title>stories-classic-project</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.\ com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required