Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

Our First SFC Web Page

To create our first SFC web page from scratch we will:

  1. Create a new clean Vue project
  2. Write code in the 'App.vue' file
  3. See how the web page updates automatically during development
  4. Build the page for production

Create a Clean Project

Now we will remove all content in the example project we made on the previous page to create our own simple web page in Vue.

Before we start to write code, remove all content inside the <template>, <script> and <style> tags, and remove any attributes like 'setup' or 'scoped'.

Your 'App.vue' file should now look like this:





Also remove the folders 'assets' and 'components' inside the 'src' folder.

Remove the line where assets are imported inside the 'main.js' file so that 'main.js' looks like this:


import { createApp } from 'vue'
import App from './App.vue'


We now have an empty project to work with.

Write code in 'App.vue'

Now that we have a clean project, add a header inside the <template> tag, like this:

  <h1>Hello World!</h1>


Save the 'App.vue' file, go to your browser by following the localhost link in the terminal. Do you see the result? The browser should now update automatically every time you save a change in VS Code, without having to manually refresh the browser.

Now lets take a look at a slightly larger Vue example:



  <h1>{{ message }}</h1>

export default {
  data() {
    return {
      message: 'This is some text'

Run Example ยป

Note: In the example above, export default makes it possible for 'main.js' to catch the data with the import App from './App.vue' so that it can be mounted on the <div id="app"> tag inside 'index.html'.

Vue Exercises

Test Yourself With Exercises


What is the command we need to write to run the project in development mode?


Start the Exercise