A lightweight playground for live editing VueJs code in the browser
The simplest way to render components is as a VueJs template:
<template>
<VueLive :code="`<date-picker />`" :components="{ DatePicker }" @error="(e) => handleError(e)">
</template>
<script>
import { VueLive } from "vue-live";
import DatePicker from "vuejs-datepicker"
export default {
components: { VueLive },
data(){
return {
// make DatePicker available in template
DatePicker
}
}
}
</script>
Check out the demo for alternative syntaxes to write your showcases.
To compile templates in the browser, you need the compiler to be in your JS bundle.
If you do not, you might see errors about using the runtime version of Vue.
To bundle this, there is a simple solution: Add an alias in webpack.config.js
.
module.export = {
resolve: {
alias: {
// this enables loading the "full" version of vue
// instead of only loading the vue runtime
vue$: "vue/dist/vue.esm.js",
},
},
};
export default {
build: {
extend(config, { isDev, isClient }) {
// ..
config.resolve.alias.vue$ = "vue/dist/vue.esm.js";
},
},
};
and finally in gridsome.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
},
};
npm ci
npm run start
npm run build
npm run test:unit
npm run test:e2e
npm run lint