vue-live-preview

Vue Live Preview

Live preview component for Vue.js and Nuxt.js.

• 👀 Examples
• 📘 CodeMirror Docs

Installation

npm i --save-dev vue-live-preview

Vue.js

webpack.config.js

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
  }
}

main.js

import VueLivePreview from 'vue-live-preview'
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

// CodeMirror options
Vue.use(VueLivePreview, {
  theme: 'material',
  tabSize: 2,
  lineNumbers: true,
})

App.vue

<template>
  <live-preview code="Your code here..."/>
</template>

Nuxt.js

For nuxt, use the component out of server side rendering.

nuxt.config.js

plugins: [
  { src: '~plugins/vue-live-preview', ssr: false },
],
css:  [
  'codemirror/lib/codemirror.css',
  'codemirror/theme/material.css',
],

plugins/vue-live-preview.js

import Vue from 'vue'
import VueLivePreview from 'vue-live-preview'

// CodeMirror options
Vue.use(VueLivePreview, {
  theme: 'material',
  tabSize: 2,
  lineNumbers: true,
})

Vue.vue

<template>
  <no-ssr>
    <live-preview :code="`Your monofile code here`"></live-preview>
  </no-ssr>
</temlate>

Browser

<head>
  <link rel="stylesheet" type="text/css" href="//unpkg.com/codemirror/lib/codemirror.css"></link>
  <link rel="stylesheet" type="text/css" href="//unpkg.com/codemirror/theme/material.css"></link>
</head>
<body>
  <div id="app">
    <live-preview :code="code"></live-preview>
  </div>

  <script src="//unpkg.com/vue/dist/vue.min.js"></script>
  <script src="//unpkg.com/axios/dist/axios.min.js"></script>
  <script src="//unpkg.com/vue-live-preview/dist/vue-live-preview.min.js"></script>

  <script>
    VueLivePreview.options = {
      theme: 'material'
    };

    Vue.use(VueLivePreview);

    new Vue({
      el: 'live-preview',
      data: {
        code: "Your code here..."
      }
    })
  </script>
</body>

Import script

import VueLivePreview from 'vue-live-preview'
import AppComponent from './components/component'
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';


// CodeMirror options
Vue.use(VueLivePreview, {
  require: {
    './components/Component': AppComponent
  },
  theme: 'material',
  tabSize: 2,
  lineNumbers: true,
})

<template>
  <live-preview code="`
    <template>
      <app-component></app-component>
    </template>
    <script>
      import AppComponent from './components/Component'
      export default {
        components: {
          AppComponent
        }
      }
    </script>
  `">
  </live-preview>
</temlate>

Or

<template>
  <live-preview :require="{'~/components/component.vue': AppComponent}" 
                :code="`
    <template>
      <app-component></app-component>
    </template>
    <script>
      import AppComponent from './components/Component'
      export default {
        components: {
          AppComponent
        }
      }
    </script>
  `">
  </live-preview>
</temlate>

<script>
  import AppComponent from '~/components/component.vue'
  export default {
    data: {
      AppComponent
    }
  }
</script>

Props