Using mdbvue, missing style.

[folaht]

I followed this tutorial:

Vue Buttons - Bootstrap 4 & Material Design. Examples & tutorial.

And ended up with this:

It’s a button, but not the one I was hoping for.

Here’s my code:

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 <folatt@guilder-test.eu.org>",
  "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": {
    "bootstrap": "4.0.0-beta.2",
    "bootstrap-vue": "^1.0.2",
    "@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.*.*"
  }
}

[happybeing]

I haven’t used VueJS but…

Have you looked for clues (ie errors) in the browser console?

Also, if you Right-click > Inspect Element

Then click on the button you can examine the rendered HTML, styles etc which might point you in the right direction.

[folaht]

There are no errors in the browser console.

Classes used in my example are btn btn-primary btn-lg waves-effect waves-light

[bzee]

Where are you including the stylesheet from Bootstrap?

[folaht]

@bzee

Where are you including the stylesheet from Bootstrap?

Nowhere. I’m a total beginner when it comes to vue.

[bzee]

Then I advice you to leave out the styling for now. Just focus on how Vue works. Actually, I’m not sure whether you’re developing for SAFE primarily, but if that’s the case then I advice to leave out Vue too. Just focus on the SAFE Network APIs.

On topic: there is a support page for MDBootstrap: https://mdbootstrap.com/support/. I’m guessing the SAFE Dev Forum is not the ideal place to ask for issues about Vue or MDBootstrap, so you might have more chance to get an answer there!

[folaht]

I found the solution after looking at the mdbvue code.
I simply copied what I saw in their main.js file.

package.json

  "dependencies": {
    "@babel/helper-module-imports": "v7.0.0-beta.51",
    "mdbootstrap": "4.*.*",
    "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.*.*"
  }
}

index.js

import Vue from 'vue';
import App from './App';
import router from './router';

import 'bootstrap/dist/css/bootstrap.css';
import 'mdbootstrap/css/mdb.css';
//import 'mdbvue/src/components/Waves.css';

export default new Vue({
  el: '#root',
  router,
  render: (h) => h(App),
});