1Mojolicious::Plugin::AsUsseetrPaCcokn:t:rPiMibopujeto:el:diVcuPieeojrusls(:3D:)oPcluumgeinnt:a:tAisosnetPack::Pipe::Vuejs(3)
2
3
4

NAME

6       Mojolicious::Plugin::AssetPack::Pipe::Vuejs - Process .vue files
7

DESCRIPTION

9       This modules is EXPERIMENTAL and based on homebrewed regexes instead of
10       running the code through an external nodejs binary!
11
12       This pipe could get pulled completely from the
13       Mojolicious::Plugin::AssetPack distribution if the problem is too hard
14       to solve.
15

SYNOPSIS

17       Currently only "script" and "template" is supported. "style" is not yet
18       supported.
19
20       Here is an example ".vue" file:
21
22         <template>
23           <h1 :id="id">Example</h1>
24           <button @click="toggle" :disabled="loading">{{loading ? "loading" : "click me!"}}</button>
25         </template>
26
27         <script>
28         var initial = false;
29         module.exports = {
30           data: function() {
31             return {id: id, loading: initial}
32           },
33           methods: {
34             toggle: function() {
35               this.loading = !this.loading;
36             }
37           }
38         };
39         </script>
40
41       The vuejs file above produces this output:
42
43         (function(){
44         var initial = false;
45         Vue.component("example", {
46           data: function() {
47             return {id: id, loading: initial}
48           },
49           methods: {
50             toggle: function() {
51               this.loading = !this.loading;
52             }
53           },
54         template: "
55           Example
56           {{loading ? \"loading\" : \"click me!\"}}
57         "}))();
58

METHODS

60   process
61       See "process" in Mojolicious::Plugin::AssetPack::Pipe.
62

SEE ALSO

64       Mojolicious::Plugin::AssetPack.
65
66
67
68perl v5.36.0                    Mo2j0o2l3i-c0i2o-u0s5::Plugin::AssetPack::Pipe::Vuejs(3)
Impressum