Building the Real Application Chapter 5<script>
import './assets/stylesheets/main.css';export default {
data: () => ({
drawer: null,
}),
props: {
source: String,
},
};
</script>This contains several tags that mostly start with v-. These are the tags given by Vuetify to
define our blocks in UI. We have attached a stylesheet file with the preceding file
called main.css. Let's add some styling to our App.vue page.
Add the following code to src/assets/stylesheets/home.css:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}#inspire {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
}.container.fill-height {
align-items: normal;
}a.side_bar_link {
text-decoration: none;
}We still have a div section with an ID app in it. This is the section where all our
other .vue files will get rendered.
Now, in HelloWorld.vue, replace the content with this:
<template>
<v-layout>
this is home