CODEWITHSUNDEEP
javascriptnode.jspugwebpackvue.js
Piknik
Piknik

Reputation: 31

Defining Vue.js template aliases

I have a front-end project laid out like so:

resources/assets/js
resources/assets/jade
resources/assets/svg
resources/assets/sass

I have recently found out that it is possible to define aliases in webpack to prevent the constant use of relative paths like ../../../.. by providing them in the resolve.alias map. Now my imports in Javascript are much simpler to understand. However, I've tried doing something similar for my Jade templates, defined like this:

<template lang="jade">
    include ../../../jade/pages/home

    .component-class
        +home-item
</template>

Instead of writing ../../../jade/pages/home, I'd like to write pages/home but can't see any documented way of doing so. Is this possible? This is something I'd like to do with sass-loader as well.

Upvotes: 3

Views: 944

Answers (1)

Graham
Graham

Reputation: 7802

Yes, you can definitely do this. I wish the docs were more clear about this as it's pretty important for a large pug app.

Add this to your app.js/server.js:

app.locals.basedir = path.join(__dirname, 'views');

Then you can reference all template files using a leading backslash character, for example:

include /pages/administrator/home
include /mixins/widget

Upvotes: 1

Related Questions