FuseBox + Vue.js seed
7 |
9 | 
10 | 
11 | 
12 |
13 |
10 |
11 |
12 | 9 | By default the Vue Component Plugin 10 | will internally use the 11 | HTML Plugin, 12 | CSSPlugin and 13 | FuseBox's internal TypeScript compiler. 14 | This is all you need to get up and running for a basic Vue project: 15 |
16 |
17 |
18 | const { FuseBox, VueComponentPlugin } = require("fuse-box");
19 |
20 | FuseBox.init({
21 | plugins: VueComponentPlugin()
22 | });
23 |
24 |
25 | 35 | Single File Components are an awesome feature of Vue and FuseBox supports them out of the box. 36 | If you use the basic configuration above then any lang attributes will overide the default plugins on a per file 37 | basis: 38 |
39 |
40 |
41 | <template lang="pug">
42 | <!-- This block will be processed using the Consolidate Plugin -->
43 | </template>
44 | <script lang="coffee">
45 | // This block will be processed using the Coffee Script Plugin
46 | </script>
47 | <style lang="scss" scoped>
48 | // This block will be processed using the Sass Plugin (and it will also be scoped to this component!)
49 | </style>
50 |
51 |
52 | 53 | In addtion, FuseBox also understands the src attribute so you can extract one (or more) blocks out of the 54 | .vue file: 55 |
56 |
57 |
58 | <template src="./my-template.pug"></template>
59 | <script src="./my-script.coffee"></script>
60 | <style src="./my-style.scss" scoped></style>
61 |
62 |
63 | 64 | If the extension is inluded in the src path then Fusebox will inferer the language type automatically. For 65 | more info on the vue file spec, see here. 66 |
67 |77 | If the configuration options above do not fit your requirements, don't panic! FuseBox allows you to take complete control 78 | over the plugin chain used to 79 | process each block. This follows FuseBox's normal plugin chain approach: 80 |
81 |
82 |
83 | const {
84 | FuseBox,
85 | VueComponentPlugin,
86 | ConsolidatePlugin,
87 | LESSPlugin,
88 | CSSResourcePlugin,
89 | CSSPlugin,
90 | CoffeScriptPlugin
91 | } = require("fuse-box");
92 |
93 | FuseBox.init({
94 | plugins: VueComponentPlugin({
95 | template: ConsolidatePlugin({ ... }),
96 | script: CoffeeScriptPlugin({ ... }),
97 | style: [
98 | LESSPlugin({ ... }),
99 | CSSResourcePlugin({ ... }),
100 | CSSPlugin({ ... })
101 | ]
102 | })
103 | });
104 |
105 |
106 | 107 | For a full list of available plugins, see here. 108 |
109 |119 | This is as simple as adding HMR to your fuse config: 120 |
121 |
122 |
123 | const { FuseBox, VueComponentPlugin } = require("fuse-box");
124 |
125 | const fuse = FuseBox.init({
126 | plugins: VueComponentPlugin()
127 | });
128 |
129 | fuse.bundle("app.js")
130 | .instructions("> index.ts")
131 | .hmr();
132 |
133 |
134 | 135 | For more information, see here. 136 |
137 |
10 |
11 |
12 |