vue-live-preview
v0.4.1
Live preview component for Vue.js and Nuxt.js
38/weekUpdated 3 years agoMITUnpacked: 1.3 MB
Published by Julien Simonet
npm install vue-live-previewVue Live Preview
Live preview component for Vue.js and Nuxt.js.
- 👀 Examples
- 📘 CodeMirror Docs
Installation
``
js
npm i --save-dev vue-live-preview
`
Vue.js
webpack.config.js
`js
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
}
`
main.js
`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
`html
`
$3
For nuxt, use the component out of server side rendering.
nuxt.config.js
`js
plugins: [
{ src: '~plugins/vue-live-preview', ssr: false },
],
css: [
'codemirror/lib/codemirror.css',
'codemirror/theme/material.css',
],
`
plugins/vue-live-preview.js
`js
import Vue from 'vue'
import VueLivePreview from 'vue-live-preview'
// CodeMirror options
Vue.use(VueLivePreview, {
theme: 'material',
tabSize: 2,
lineNumbers: true,
})
`
Vue.vue
`html
">
`
$3
`html
`
$3
`js
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,
})
`
`html
">
`
Or
`html
">
``
$3
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| code | String | Code of Single File Components | null | true |
| options | Object | CodeMirror options |
{
|
|
| 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} |