vue-live-preview
v0.4.1
Published
Live preview component for Vue.js and Nuxt.js
Downloads
255
Maintainers
Readme
Vue Live Preview
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>