Aurelia-CLI

First of all, webpack is highly recommended. The amount of fiddling with the new CLI version 0.33.1 is just annoying.

Not convinced? Keep reading and compare to webpack installation procedure.

Scaffolding the app

Make sure you have at least version 0.32.0 of Aurelia-CLI installed.

Note: 0.33.1 requires some additional configuration. Make sure you follow the instructions!

$ au new

Choose Aurelia options as you see fit. In the last step, choose to install all dependencies.

Getting the plugin

In your project install the following via CLI (execution order matters!):

$ au install jquery
$ au install tslib
$ au install materialize-amd  
$ au install aurelia-materialize-bridge

The materialize-amd is an AMD compatible build of Materialize-CSS. Installing it with au new also copies CSS and font files to the styles folder.

Note: Due to a change in Materialize's loading order (probably this commit), version v0.100.2 won't work with Aurelia CLI RequireJS. Therefore, the maximum (and in fact the only) AMD build is v0.100.1

If you need an AMD build of an earlier version create and issue in the repository

Configure your app

1. For Material Design icons include this in your index.html head section:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Add this to main.js in your src folder:

   aurelia.use.plugin('aurelia-materialize-bridge', b => b.useAll().preventWavesAttach());

   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:

   .plugin('aurelia-materialize-bridge', bridge => {
    bridge
      .useButton()
      .useCollapsible()
      .useModal()
      .useTabs()
      .useWaves().preventWavesAttach();
   });

   At the end of this page is a full list of currently available options. Important: preventWavesAttach is only needed with CLI to prevent dimmed buttons. See this issue for details.

3. Add this to your index.html

   <link rel="stylesheet" href="styles/css/materialize.min.css">

   Note: The CLI cannot bundle fonts like webpack, plus materialize.css file references the fonts by relative paths (eg "../fonts/roboto/Roboto.ttf").

   If you require materialize.css from HTML the relative path is interpreted to be relative to the path specified in aurelia.json. While in reality, fonts still reside in node_modules, requirejs looks for fonts in materialize-amd/fonts/roboto (from evaluation of materialize-amd/css/../fonts/roboto).

   You can still use the following in app.html

   <require from="materialize-amd/css/materialize.css"></require>

   but in this case you will have to manually copy fonts to materialize-amd folder in the root of your project.

4. When using version 0.33.1 of the CLI add "node_modules/jquery/dist/jquery.js" to the prepend section of the vendor-bundle.js configuration in the aurelia.json file. Without it your project won't run, complaining about missing $ declaration and weirdly loading modules from node_modules directly. Remove jquery from dependencies section.

5. When using version 0.33.1 of the CLI add "node_modules/materialize-amd/dist/js/materialize.amd.js" to the end of prepend section of the vendor-bundle.js configuration in the aurelia.json file - after jquery and require. Also remove materialize-amd configuration from dependencies section.

   Note: This is necessary because dependencies loading order is broken again in CLI (duh!). If materialize-amd is left in there it will add functions to the prepended jquery but the bridge will try to use jquery from dependencies.

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, based on Aurelia Skeleton navigation.

As described above, here is a full list of available options:

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();
});