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.

Table of Contents

    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>

    Chimezie Enyinnaya

    16 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com