pug

Passing variables through Jade templates


Is it possible in Jade/Pug to pass variables from one template to another? I want to do something like this:

tmp1.jade

div.anyClass
  include components/checkbox('someLabel')

tmp2.jade

div.otherClass
  div.label
    {someLabel}

Solution

  • Included templates inherit the variables scope of the template that included them, so what you're after will happen automatically for you.

    So the following will work:

    tmp1.jade

    - var label = 'value'
    div.anyClass
        include tmp2
    

    tmp2.jade

    div.otherClass
        div.label
            #{label}
    

    You can also use mixins to pass variables, they are like functions (you define them first, then call them)

    So you could do the following:

    tmp1.jade

    mixin labeldiv(myLabel)
        div.otherClass
            div.label
                #{myLabel}
    
    div.anyClass
        +labelDiv("the label")
    

    It's worth mentioning that you can also put mixins inside includes, if you want them to be common across multiple templates. You could do this:

    myMixins.jade

    mixin labeldiv(myLabel)
        div.otherClass
            div.label
                #{myLabel}
    

    tmp1.jade

    include myMixins
    div.anyClass
        +labelDiv("the label")
    

    The Jade Syntax Docs have some great (live) examples of how it all works.