How to create a Vuejs Project

Prerequisite: Install node on your machine. If using Mac m1, switch to node 16 with nvm use 16

We will go over:

  • 1. How to install Vue js
  • 2. How to add styling to the Vue js project
  • 3. How to create Vue js components and add content to each component
  • 4. How to display content on the browser by importing the components

#1. Set up and installation

On terminal or on your editor of choice, run the following commands

  1. Install, create, initialize and execute Vue with: npm init vue@latest
  2. At the prompt, type your project name eg vue-project
  3. Type n on every question
  4. Move to your project folder with: cd vue-project
  5. Install your dependency by running npm install
  6. Start dev server with: npm run dev
  7. Go to your browser URL window, type: http://localhost:3000/
  8. You did it! You have successfully created a Vue project and you should see the Vue welcome browser

#2. Add styling to Vue js project

  1. First, cleanup to have a black canvas: InsideApp.vue
  • Clean up template: Go to app.vue and remove everything except template and style tags
  • Remove the style code

2. Inside index.html

  • Change title to your project title Vue Project
  • Add bootstrap stylesheet CDN link into head for CSS.

3. Add Assets: In src/assets

  • Add background image and logo in the asset folder

#3. Create Vue js components and add content

  1. Remove the default components in the components foldersrc/components
  2. Create components files by running : touch HomePage.vue , touch Header.vue and touch Footer.vue
  3. Populate your header by adding a template tag on Header.vue file, with bootstrap classes and your content
<template>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Project Vue</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</template>

4. Populate your footer by adding a template tag on Footer.vue file, with bootstrap classes. This is similar to the header, so can copy paste and just change header tag to footer . Also, remove title link.

<template>
<footer>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</footer>
</template>

5. Populate your home page by adding a template tag on HomePage.vue file, with bootstrap classes. Add some page text and image content.

<template>
<body>
<main>
<h1>Logistics and maritime services</h1>
<h2>With more than 8 years of experience in the maritime sector and logistics transport, we will be able to meet your needs. </h2>
<button type="button" class="btn btn-info">Ask for a quote</button>
</main>
</body>
</template>

#4. Display content on the browser

  1. In App.vue , import components inside the script tag
<script setup>
import Header from './components/Header.vue'
import HomePage from './components/HomePage.vue'
import Footer from './components/Footer.vue'
</script>

2. Register these components to become available in the App.vue file

<template>
<div id="app">
<section class="container">
<Header></Header>
</section>
<section class="container">
<HomePage></HomePage>
</section>
<section class="container">
<Footer></Footer>
</section>
</div>
</template>

The content of your project should be displayed on your browser at yourlocalhost address

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store