Vue Live Preview
Live preview component for Vue.js and Nuxt.js.
Installation
npm i --save-dev vue-live-previewVue.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} |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent