I checked out this handy tutorial
But what really caught my attention was this tutorial:
After following along, I ended up with the result below:
https://i.sstatic.net/asgZs.png
It's clear that something is missing in terms of style. As a novice in Vue and still getting familiar with nodejs, I'm struggling to figure out how and where the styling should come into play.
Take a look at my code snippets:
App.vue
<template>
<div :class="$style.App">
<ButtonPage />
</div>
</template>
<script>
import ButtonPage from './components/ButtonPage.vue'
const safenetwork = require('./safenetwork.js');
export default {
name: 'App',
components: {
ButtonPage
},
async created() {
await safenetwork.authoriseAndConnect();
}
}
</script>
ButtonPage.vue
<template>
<btn outline="primary" size="lg">Button</btn>
</template>
<script>
import { Btn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
Btn
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
package.json
{
"name": "Site-Yropeen",
"version": "1.0.0",
"description": "Yropeên",
"homepage": "https://gitlab.com/UniversalBasics/Yropeen/Site-Yropeen",
"keywords": [
"conlang",
"European"
],
"author": "Folât Sômêjpjêr <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4721282b2633330720322e2b2322356a3322343369223269283520">[email protected]</a>>",
"contributors": [],
"license": "GPL-3.0+",
"main": "index.js",
"scripts": {
"build": "neutrino build",
"start": "neutrino start"
},
"repository": {
"type": "git",
"url": "git://gitlab.com/UniversalBasics/Yropeen/Site-Yropeen/Site-Yropeen.git"
},
"dependencies": {
"@babel/helper-module-imports": "v7.0.0-beta.51",
"mdbvue": "4.*.*",
"vue": "2.*.*",
"vue-router": "3.*.*"
},
"devDependencies": {
"@neutrinojs/vue": "8.*.*",
"babel-plugin-transform-runtime": "6.*.*",
"babel-preset-stage-2": "6.*.*",
"jquery": "3.*.*",
"neutrino": "8.*.*",
"webpack": "3.*.*"
}
}