About vue-live-preview

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

m

Published by

mons54

Visit View Profile

README.md

View on GitHub

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

Name	Type	Default	Required	Description
code	String	Code of Single File Components	null	true
options	Object	CodeMirror options	`{ theme: 'default', tabSize: 2, lineNumbers: true, mode: 'text/x-vue', }`
scoped	Boolean	Apply css to elements of preview only	true
showCode	Boolean	Show element code (Used for toogle)	true
classElem	String	Class css for this element	row
classCode	String	Class css for element code (Used for bootstrap grid)	col-md-12
classPrev	String	Class css for element preview (Used for bootstrap grid)	col-md-12
require	Object	List of require modules	`{'filePath': Instance}`

vue-live-preview