Vuetify Code Editor

index.html

<div id="app">
  <v-app>
      <v-layout fill-height>
        <v-navigation-drawer
          dark
          mini-variant
          stateless
          value="true"
          app
        >
          <v-toolbar flat class="transparent">
            <v-list class="pa-0">
              <v-list-tile avatar>
                <v-list-tile-avatar>
                  <img src="https://randomuser.me/api/portraits/men/85.jpg" >
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>John Leider</v-list-tile-title>
                </v-list-tile-content>
                <v-list-tile-action>
                  <v-btn icon @click.native.stop="mini = !mini">
                    <v-icon>chevron_left</v-icon>
                  </v-btn>
                </v-list-tile-action>
              </v-list-tile>
            </v-list>
          </v-toolbar>
          <v-list class="pt-0" dense>
            <v-divider></v-divider>
            <v-list-tile v-for="item in items" :key="item.title" @click="">
              <v-list-tile-action>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-navigation-drawer>
 <v-flex id="main">
  <div id="main-sidenav">
    <h4>sidenav</h4>
<ul>Directory
  <li><v-icon>folder</v-icon> /
    <ul>
      <li><v-icon>folder</v-icon> assets</li>
      <li><v-icon>folder</v-icon> components</li>
      <li><v-icon>folder</v-icon> plugins</li>
      <li><v-icon>folder</v-icon> layouts</li>
      <li><v-icon>folder</v-icon> pages</li>
      <li><v-icon>folder</v-icon> store</li>
      <li><v-icon>folder</v-icon> modules</li>
    </ul>
  </li>
</ul>
</div>
  <div id="main-content">
    <div id="code">
      <textarea id="template" v-model="rawHtml">
        {{ rawHtml }}
      </textarea>
      <textarea id="script" v-model="rawScript">
        {{ rawScript }}
      </textarea>
      <textarea id="style" v-model="rawStyle">{{ rawStyle }}</textarea>
    </div>
    <div id="preview">
      <div id="display">
        <span v-html="rawHtml"></span>
      </div>
      <div id="devtools">
        <div id="devtools-components">component tree</div>
        <div id="devtools-state">state</div>
      </div>
    </div>
  </div>
          
</v-flex>
        
  </v-layout>
    <v-flex>
      <div id="action-rail-items">
    <div id="tasks" class="action-rail-item">tasks</div>
    <div id="dependencies" class="action-rail-item">dependencies</div>
        <div id="terminal" class="action-rail-item">terminal</div>
    <div id="data" class="action-rail-item">data</div>
    <div id="hosting" class="action-rail-item">hosting</div>
  </div>
    </v-flex>
 </v-app>
</div>

script.babel

new Vue({
  el: '#app',
  data () {
    return {
      drawer: true,
      rawHtml:`<a href="#" class="btn primary">Button Demo</a>`,
      rawScript:`export default() {
    data (): {
        buttonText: "Button Demo"
    }
}`,
      rawStyle: `.someClass {
    display: flex;
}
#someId {
    font-weight: bold;
}
`,
      items: [
        {
          title: 'Home',
          icon: 'home',
          childRoutes: [
            {
              title: 'Index',
              icon: 'dashboard',
              menuItems: ['All', 'Featured', 'Popular', 'Recent']
            },
            {
              title: 'About',
              icon: 'info',
              menuItems: ['All', 'Featured', 'Popular', 'Recent']
            },
            {
              title: 'Contact',
              icon: 'dashboard',
              menuItems: ['LinkedIn', 'Email', 'Popular', 'Recent']
            }]
        },
        { 
          title: 'Projects', 
          icon: 'folder',
          childRoutes: ['Dashboard', 'Create', 'Manage']
        },
        {
          title: 'Repos',
          icon: 'code',
          childRoutes: ['Dashboard', 'Create', 'Explore', 'Manage']
        }
      ],
      mini: true,
      right: null
    }
  }
})

scripts

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>

style.css

  #main {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    margin-left: 80px;
    align-items: stretch;
    text-align: center;
    justify-content: center;
  }
  #main-sidenav {
    background-color: #ddd;
    min-width: 250px;
    flex-shrink: 2;
    text-align: left;
  }
  #main-content {
    background-color: white;
    width: 100%;
    flex-shrink: 1;
    display: flex;
    flex-wrap: nowrap;
  }
#code {
  display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    align-items: stretch;
    text-align: center;
}
#template, #script, #style {
  border: 1px solid grey;
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;
}
#preview {
  width: 50%;
  display: flex;
  justify-content: stretch;
  flex-direction: column;
}

#display {
  border: 1px solid grey;
  height: 60%;
}
#devtools {
  height: 40%;
  display: flex;
}
#devtools-components {
  width: 50%;
  border: 1px solid grey;
}
#devtools-state {
  width: 50%;
  border: 1px solid grey;
}


#action-rail-items {
    background-color: #ddd;
    display: flex;
    width: 100%;
    margin-left: 80px;
    align-items: stretch;
    justify-content: stretch;
    text-align: center;
  }
.action-rail-item {
  border: 1px solid grey;
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;
  flex-shrink: 1;
}
 

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

vuetify-code-editor.markdown

Vuetify Code Editor

A Pen by Michael Garten on CodePen.

License.