Skip to content

Instantly share code, notes, and snippets.

@PiiXiieeS
Forked from bricksroo/App.vue
Created July 7, 2019 17:20
Show Gist options
  • Save PiiXiieeS/e8c0929e25ba1870d357bceeea18aec4 to your computer and use it in GitHub Desktop.
Save PiiXiieeS/e8c0929e25ba1870d357bceeea18aec4 to your computer and use it in GitHub Desktop.
Reveal.js in Vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Reveal from 'reveal.js/js/reveal'
export default {
name: 'app',
components: {
// HelloWorld
},
mounted() {
Reveal.initialize()
}
}
</script>
<style>
@import url('../node_modules/reveal.js/css/reveal.css');
@import url('../node_modules/reveal.js/css/theme/white.css');
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* margin-top: 60px; */
height: 100vh;
}
</style>
{
"name": "reveal",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"reveal.js": "^3.6.0",
"vue": "^2.5.13"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.6",
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
"@vue/cli-service": "^3.0.0-beta.6",
"vue-template-compiler": "^2.5.13"
},
"babel": {
"presets": [
"@vue/app"
]
},
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"eslint:recommended"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
@vesper8
Copy link

vesper8 commented Nov 14, 2019

thank you for this.. I was losing my mind trying to get it to work with Vue.. in the end it was just one thing that I was missing to make it work:

.reveal {
  height: 100vh;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment