Project 15: Contact Us Form

Vue Engineer

Builds on these lessons

Component Task

Objective

Vue Router maps URL paths to components via createRouter. <router-view /> renders whichever component matches the current route; <router-link> navigates without a full page reload.

You're building the routing for a contact page.

Task: configure a router with a /contact route pointing at ContactForm, and render a link plus the router view in App.vue.

Component.vue

<!-- router.js -->
import { createRouter, createWebHistory } from 'vue-router';
import ContactForm from './ContactForm.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/contact', component: ContactForm }
  ]
});

export default router;

<!-- App.vue -->
<script setup>
</script>
<template>
  <router-link to="/contact">Contact</router-link>
  <router-view />
</template>

* Hint: Correct characters turn green, incorrect ones turn red.

Build Output

🟢

Build your component to see the result

← Previous Next →