Materialize CSS, Vue, Pug, Sass, CoffeeScript

index.pug

body.blue-grey.darken-3
  #root
    .side-nav#mobile.blue-grey.darken-3
      ul
        li(v-for="link in links")
          a(:href="link.link")
            span(v-text="link.text").blue-grey-text.text-lighten-3.flow-text
            i(v-text="link.icon").material-icons.left.blue-grey-text.text-lighten-3
  
    header
      .navbar-fixed
        nav(:class="styles")
          .nav-wrapper
            .container-full
              .row
                .col.s12
                  a(v-text="title").brand-logo.flow-text.blue-grey-text.text-lighten-4
                  a(href="#!", data-activates="mobile").button-collapse
                    i.material-icons.blue-grey-text.text-lighten-3 more_vert
                  ul.right.hide-on-med-and-down
                    li(v-for="link in links")
                      a(:href="link.link")
                        span(v-text="link.text").blue-grey-text.text-lighten-3
                        i(v-text="link.icon").material-icons.left.blue-grey-text.text-lighten-3
                  
    main
      .container
        .row
          .col.s12
            h1.flow-text.blue-grey-text.text-lighten-3.center-align Here should reside your main content
            
    footer.page-footer.blue-grey.darken-3.z-depth-3
      .container
        .row
          .col.s12
            h1.flow-text.blue-grey-text.text-lighten-2 Here is a little more about your app
            p.blue-grey-text.text-lighten-3 div Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae ullam sequi fugit qui dolorem officia aspernatur aliquid est. Sint rerum similique asperiores ut exercitationem modi, commodi quam molestias facilis perspiciatis debitis. Incidunt, asperiores aut, officia facere eligendi nemo minima inventore voluptatibus sapiente temporibus itaque impedit ut cumque consequatur quod illo?
            
      .footer-copyright
        .container
          span.left.blue-grey-text.text-lighten-3 Amin NAIRI
          span.right.blue-grey-text.text-lighten-3 2017 - 2018 ©

materialize-css-vue-pug-sass-coffeescript.markdown

Materialize CSS, Vue, Pug, Sass, CoffeeScript

Template using the latest version from Materialize CSS, Vue, Pug, Sass & CoffeeScript to help you build quick project idea, test something out or simply building what's on your mind today with the speed of all these tools combined!

A Pen by aminnairi on CodePen.

License.

script.coffeescript

new Vue
  el: "#root"
  
  data:
    title: "Let's get started now!"
    greeting: "Why not building the most awesome application ever here ?"
    styles: "blue-grey darken-3 blue-grey-text text-lighten-3"
    duration: 6000
    links: [
      { link: "#!", icon: "home", text: "First link" }
      { link: "#!", icon: "face", text: "Second link" }
      { link: "#!", icon: "settings", text: "Third link" }
    ]
  
  mounted: ->
    $ =>
      Materialize.toast @greeting, @duration, @styles
      
      $ ".button-collapse"
        .sideNav
          closeOnClick: true

scripts

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/materialize-css/dist/js/materialize.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

style.sass

#root
  min-height: 100vh
  display: flex
  flex-direction: column
  
main
  flex: 1 0 auto
  
.clear
  clear: both

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/materialize-css/dist/css/materialize.min.css" rel="stylesheet" />