Build a Twitter Clone With Adonis and Vue

Adding Semantic UI

To start carving out the frontend app, let's add a CSS framework which will help us quickly style our app. For the purpose of this course, we'll be using Semantic UI as our CSS framework.

So we'll start by adding Semantic UI to the app. Open index.html and replace it content with the code below:

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Tweetr - A Twitter Clone</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
</head>
<body>
      <div id="app"></div>
      <!-- built files will be auto injected -->
</body>
</html>

We reference Semantic UI on CDN.

To wrap this lesson, let's quickly take a moment to restructure the App component and remove some unused code. Open src/App.vue and replace it content with below:

// src/App.vue

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style>
    body {
        background-color: #f7f7f7;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .is-danger {
        color: #9f3a38;
    }
</style>