Welcome to Aurelia with FuseBox

# Fuse-box 2.x ## Getting the plugin In your project install the plugin via npm with the following command: ``` $ npm install --save aurelia-materialize-bridge materialize-css ``` You will also need a fuse-box loader. At the moment, there are two that I know of: * : `npm install --save git://github.com/fuse-box/fuse-box-aurelia-loader` * `npm install --save aurelia-loader-fusebox` This document will use the first since it's the official loader. But the second by arabsight is a good one as well. :-) ## Configure your app 1. Make sure you use [manual bootstrapping](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4). In order to do so open your `index.html` and locate the element with the attribute aurelia-app: ```markup ``` For Material Design icons include this in your `index.html` head section: ```markup ``` 2. Update `main.js` in your `src` folder with following content: ```javascript import {Aurelia} from 'aurelia-framework'; import 'fuse-box-aurelia-loader'; import 'aurelia-bootstrapper'; export async function configure(aurelia: Aurelia) { aurelia.use .standardConfiguration() .developmentLogging(); aurelia.use.plugin('aurelia-materialize-bridge', b => b.useAll().preventWavesAttach()); await aurelia.start(); await aurelia.setRoot('app'); } ``` **Note:** The above shows how to use all available controls at once. If you choose to pick which you'd like to use, you can `use` single components like this: ```javascript .plugin('aurelia-materialize-bridge', bridge => { bridge .useButton() .useCollapsible() .useModal() .useTabs(); }); ``` At the end of this page is a full list of currently available options. 3. Import css: ```markup ``` 4. Configure Fuse-box: ```javascript const { RawPlugin, FuseBox, HTMLPlugin, CSSPlugin } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: './src', output: './dist/$name.js', plugins: [ CSSPlugin(), HTMLPlugin(), RawPlugin(['.css']) ], alias: { 'jQuery': 'jquery', }, shim: { jquery: { source: 'node_modules/jquery/dist/jquery.js', exports: '$' }, // Materialize needs a shim here to be placed at the top of the bundle. // It's necessary because loading the module introduces side-effects // and it exports globals. 'materialize-css': { source: 'node_modules/materialize-css/bin/materialize.js', exports: 'Materialize' } } }); // Because we created a shim above, we need to bundle Materialize's CSS // with a different name. Otherwise fuse-box will not bundle the CSS. // So we trick fuse-box to load a css-only module by giving meaningless (space) instructions. fuse.register('materialize-css-styles', { homeDir: 'node_modules/materialize-css', main: 'bin/materialize.css', instructions: ' ' }); // Register the bridge and its contents. fuse.register('aurelia-materialize-bridge', { homeDir: 'node_modules/aurelia-materialize-bridge/dist/commonjs', main: 'index.js', instructions: '**/*.{html,css,js}' }); fuse.bundle('app') .watch().cache(false) .instructions(` > main.ts + **/*.{ts,html,css} + aurelia-pal + aurelia-pal-browser + aurelia-framework + aurelia-logging-console + aurelia-templating-binding + aurelia-templating-resources + aurelia-event-aggregator + aurelia-history-browser + aurelia-templating-router + aurelia-materialize-bridge + materialize-css-styles `); fuse.dev({ port: 4445, root: './' }); fuse.run(); ``` 5. Add the bundle result to `index.html` ```markup Welcome to Aurelia with FuseBox ``` ## You are done! It is now possible to drop some custom-elements into your DOM. See the other pages on this website for detailed information on how to do this. **Now you might want to do our** [**app developers tutorial**](https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/app_developers_tutorial/introduction.html)**, based on Aurelia Skeleton navigation.** As described above, here is a full list of currently available options: ```javascript aurelia.use.plugin('aurelia-materialize-bridge', bridge => { bridge .useAutoComplete() .useBadge() .useBreadcrumbs() .useBox() .useButton() .useCard() .useCarousel() .useCharacterCounter() .useCheckbox() .useChip() .useCollapsible() .useCollection() .useColors() .useDatePicker() .useDropdown() .useFab() .useFile() .useFooter() .useInput() .useModal() .useNavbar() .usePagination() .useParallax() .useProgress() .usePushpin() .useRadio() .useRange() .useScrollfire() .useScrollSpy() .useSelect() .useSidenav() .useSlider() .useSwitch() .useTabs() .useTooltip() .useTransitions() .useWaves() .useWell(); }); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/master/2.-installation/fuse-box-2.x.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.