Skip to content

Instantly share code, notes, and snippets.

@FikriRNurhidayat
Last active May 15, 2021 12:28
Show Gist options
  • Save FikriRNurhidayat/60c2fc8e740c6c52d2fae470c4653fa3 to your computer and use it in GitHub Desktop.
Save FikriRNurhidayat/60c2fc8e740c6c52d2fae470c4653fa3 to your computer and use it in GitHub Desktop.
Problem implementing Vuetify CSS Helper.

Here's my vuetify.js looks like.

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({});

Also here's my package.json

{
  "dependencies": {
    "aos": "^2.3.4",
    "core-js": "^3.6.5",
    "mapbox-gl": "^2.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.3.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

Here's how I use it.

    <v-container class="py-5">
      <v-row>
        <v-col cols="12" md="6" lg="6">
          <div class="main" v-text="me.main" data-aos="fade-in"></div>
        </v-col>
        <v-col cols="12" md="6" lg="6">
          <div class="body" v-text="me.body" data-aos="fade-in" data-aos-delay="300"></div>
        </v-col>
      </v-row>
    </v-container>
<template>
<c-section class="me">
<v-container class="py-5">
<v-row>
<v-col cols="12" md="6" lg="6">
<div class="main" v-text="me.main" data-aos="fade-in"></div>
</v-col>
<v-col cols="12" md="6" lg="6">
<div class="body" v-text="me.body" data-aos="fade-in" data-aos-delay="300"></div>
</v-col>
</v-row>
</v-container>
</c-section>
</template>
<script>
import Section from '@/components/Section.vue'
export default {
name: 'About',
components: {
'c-section': Section
},
data: () => ({
me: {
main: 'Fikri Rahmat Nurhidayat',
body: "Mentor, Backend Developer, and Frontend Developer, or as you can tell, I'm fullstack developer."
}
}),
props: [
'content'
]
}
</script>
<style lang="scss" scoped>
.me {
.main {
font-size: 2rem;
}
.body {
text-align: left;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment