Vue 3 Projects

Create a Landing Page with Vue 3 and JavaScript

Spread the love

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a landing page with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create landing-page

and select all the default options to create the project.

Create the Landing Page

To create the landing page, we write:

  <form v-if="!submitted" @submit.prevent="submitted = true">
      <label>your name</label>
      <input v-model.trim="name" />
    <button type="submit">submit</button>
  <div v-else>
    <p>Welcome {{ name }}</p>
    <p>The time is {{ dateTime }}</p>

export default {
  name: "App",
  data() {
    return {
      name: "",
      dateTime: new Date(),
      timer: undefined,
      submitted: false,
  methods: {
    setDate() {
      this.dateTime = new Date();
  mounted() {
    this.timer = setInterval(() => {
    }, 1000);
  beforeUnmount() {

We have a form that lets the user submit their name.

Inside it, we have an input that binds to the name reactive property with v-model .

The trim modifier lets us trim leading and trailing whitespaces.

The form has the v-if directive to show the form if submitted is false .

And triggering the submit event with the submit button with set submitted to true .

Below that, we should the landing page content by showing the name and dateTime .

In the script tag, we have the data method to return our reactive properties.

The setDate method sets the dateTime to the current date.

The mounted hook calls setInterval to call setDate to update dateTime every second.

The beforeUnmount hook calls clearInterval to clear the timer when we unmount the component.


We can create a landing page with Vue 3 and JavaScript.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *