title: vue.js and sidebar example
body: <p>I am trying to get this sidebar (<a href="https://codepen.io/andymerskin/pen/wGbEOp" rel="nofollow noreferrer">https://codepen.io/andymerskin/pen/wGbEOp</a>) to work in my webpacked vue.js project. I can't get it to translate or transition! but it changes in console as it should and no errors whatsoever.  PLease help. I am completely overlooking something and have been at it for far too long. Thanks for your help in advance. ;) </p>
  
  <p>I have 2 components; body and sidebar. Sidebar is being called in body.vue.</p>
  
  <p>Here is my Body.vue;</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="main"&gt;
      &lt;div class="info"&gt;
        &lt;h1 class="title"&gt;
        &lt;pre&gt;&amp;lt;zap-slideout&amp;gt;&lt;/pre&gt;
        &lt;/h1&gt;
        &lt;p class="description"&gt;Give it a jolt. Click &lt;strong&gt;Open&lt;/strong&gt; at the top.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;sidebar&gt;&lt;/sidebar&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Sidebar from '../components/Sidebar'
  export default {
    components: {
      'sidebar': Sidebar
    }
  }
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  a {
    color: #42b983;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and my Sidebar.vue;</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="sidebar" class="sidebar"
          :class="{ isOpen: isOpen }"&gt;
       &lt;div class="sidebar-opener"
            @click="toggle"&gt;{{openerText}}&lt;/div&gt;
       &lt;ul class="sidebar-menu"&gt;
         &lt;li class="sidebar-menu-item"&gt;
           &lt;img class="zap-emoji" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/19332/zap-emoji.svg" alt="Zap Emoji" /&gt;
         &lt;/li&gt;
         &lt;li class="sidebar-menu-item"
           v-for="item in menu"&gt;{{item}}&lt;/li&gt;
         &lt;li class="sidebar-menu-item--small"
           v-for="item in smallMenu"&gt;{{item}}&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
  export default {
    data: () =&gt; ({
      openerText: 'Open',
      isOpen: false,
      menu: [ 'Home', 'Work', 'Contact' ],
      smallMenu: [ 'Tips', 'Resources', 'Shenanigans' ]
    }),
    methods: {
      open () {
        this.openerText = 'Close'
        this.isOpen = true
      },
      close () {
        this.openerText = 'Open'
        this.isOpen = false
      },
      toggle () {
        if (this.isOpen) {
          this.close()
        } else {
          this.open()
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and my main.js;</p>
  
  <pre><code>// The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import App from './App'
  import router from './router'
  import Sidebar from './components/Sidebar'
  Vue.component('sidebar', Sidebar)
  
  Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })
  </code></pre>
  
  <p>and my App.vue;</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'app'
  }
  &lt;/script&gt;
  
  &lt;style lang="css"&gt;
    @import "../public/style.css";
  &lt;/style&gt;
  </code></pre>
  
  <p>and my index.js</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Body from '@/components/Body'
  import Sidebar from '@/components/Sidebar.vue'
  Vue.component('sidebar', Sidebar)
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'Body',
        component: Body
      }
    ]
  })
  </code></pre>
  
  <p>and my css;</p>
  
  <pre><code>/* main css, body, etc */
  
  body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #fff;
    background-color: #2c3e50;
    -webkit-font-smoothing: antialiased;
  }
  
  strong {
    font-weight: 600;
  }
  
  .info {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateX(50%);
    text-align: center;
  
  }
  
  .title {
    font-size: 24px;
    font-weight: 600;
  }
  
  .description {
    margin-top: 20px;
  }
  
  /*
  Sidebar styles...
   */
  .sidebar {
    position: relative;
    width: 340px;
    height: 100vh;
    padding: 30px;
    background-color: #34495e;
    transform: translateX(100%);
    transition: transform 0.6s ease(out-cubic);
  
    &amp;.isOpen {
      transform: translateX(0);
    }
  }
  
  .sidebar-opener {
    position: absolute;
    top: 20px;
    right: 100%;
    margin-right: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    cursor: pointer;
  
    &amp;:hover {
      text-decoration: underline;
    }
  }
  
  .sidebar-menu {
    font-weight: 600;
    color: #fff;
  }
  
  .sidebar-menu-item,
  .sidebar-menu-item--small {
    cursor: pointer;
  
    &amp;:hover {
      text-decoration: underline;
    }
  
    &amp; + &amp; {
      margin-top: 20px;
    }
  }
  
  .sidebar-menu-item {
    font-size: 36px;
  
    &amp; + .sidebar-menu-item--small {
      margin-top: 30px;
    }
  }
  
  .sidebar-menu-item--small {
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ecf0f1;
  }
  
  /* The famed Zap agency logo (TM) */
  .zap-emoji {
    height: 120px;
  }
  </code></pre>