Allow parameters for aliasing in templates

[piknik]

I've asked how to do what I want in the forum with no response, so I assume this is a missing feature.

What I want, is to be able to define aliases for vue templates like I do with JavaScript code. Take this sample from a webpack config:

    resolve: {
        extensions: ['', '.js', '.vue'],
        root: path.resolve(__dirname),
        alias: {
            'src': resolveJSPath(''),
            'components': resolveJSPath('components'),
            'store': resolveJSPath('store'),
            'models': resolveJSPath('models'),
            'directives': resolveJSPath('directives'),
            'services': resolveJSPath('services')
        }
    },

This allows me to require or import in my JavaScript like so:

var Public = require('components/public')
var Home = require('components/public/home')
var About = require('components/public/about')
//...etc

Notice the lack of relative paths due to aliasing.
Now, here is one of my Vue templates:

<template lang="jade">
        include ../../../../jade/vue/base

    include ../../../../jade/pages/home
//-...etc

Notice the absurd amount of traversing up the directory due to no aliasing for templates. I've been searching for a solution to this with no results, so I assume this is something that needs to be implemented.

I have a main directory structure like this:

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

I can only assume the same issue exists with loading SASS styles within the .vue file.

[yyx990803]

This takes quite some work because these are not webpack module imports, and if you do want them to respect the aliases you will need custom parsing logic of jade templates to extract and rewrite the paths.

On the other hand, template stitching like this is not something I recommend when using Vue & vue-loader. I would just compose everything as components instead of templates.

[piknik]

I understand. I'm sure specifying some kind of root folder for templates and style would be a lot easier to do, I was looking into this as well but haven't found any functionality like specifying a root parameter. Maybe something like:

<template lang="jade" root="resources/assets/jade">
    //-...

In order for me to write pages (as mixins) that are re-useable for JavaScript-disabled clients, I need to be able to write the page layout where the jade compiler can write non-js pages for the back-end (laravel) to serve to clients. Doing it the way I am prevents code duplication. Though I know writing everything in Vue is a ton easier, this was the best way I could think of. If you have another way, let me know!

[inssitu]

root parameter would be amazing. I am currently using vue components because of this lack for all my jade mixins. An example:

I have a lot of images in my web and a lot of pages with vue router and to not repeat the s3 link in all my images I have:

some page

s3-img(path="logo.png", alt="example")

li(v-for="track in tracks")
    s3-img(path="{{track.name}}.jpg", alt="example")

and this s3-img "mixin"

<template>
  <img :src="s3Path" alt="{{alt}}">
</template>

<script>
  export default {
    data(){
      return {
        s3Path: 'https://s3-eu-west-1.amazonaws.com/domain.domain.io/assets/images/' + this.path
      }
    },
    props: {
      path: {type: String, required: true},
      alt: String
    }
  }
</script>

Any other better way?

Thanks

[yyx990803]

Closing due to inactivity. Please open a new issue with a reference to this one if you can follow up with more information.