Mojolicious::Plugin::AssetPack::Pipe::Vuejs - Process .vue files
This modules is EXPERIMENTAL and based on homebrewed regexes instead of running the code through an external nodejs binary!
This pipe could get pulled completely from the Mojolicious::Plugin::AssetPack distribution if the problem is too hard to solve.
Currently only script and template is supported. style is not yet supported.
script
template
style
Here is an example .vue file:
.vue
<template> <h1 :id="id">Example</h1> <button @click="toggle" :disabled="loading">{{loading ? "loading" : "click me!"}}</button> </template> <script> var initial = false; module.exports = { data: function() { return {id: id, loading: initial} }, methods: { toggle: function() { this.loading = !this.loading; } } }; </script>
The vuejs file above produces this output:
(function(){ var initial = false; Vue.component("example", { data: function() { return {id: id, loading: initial} }, methods: { toggle: function() { this.loading = !this.loading; } }, template: " Example {{loading ? \"loading\" : \"click me!\"}} "}))();
See "process" in Mojolicious::Plugin::AssetPack::Pipe.
Mojolicious::Plugin::AssetPack.
To install Mojolicious::Plugin::AssetPack, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Mojolicious::Plugin::AssetPack
CPAN shell
perl -MCPAN -e shell install Mojolicious::Plugin::AssetPack
For more information on module installation, please visit the detailed CPAN module installation guide.