Vue-cli: Use template file other than index.html

Question

I am running a Vue 3 application using the vue-cli-service (webpack, no vite yet).

Because I want to re-use some of the code for a separate application, I need to create a separate HTML tempate file (e.g. module.html) to mount the application in.

However, it seems that the vue-cli and/or the webpack configuration do not let me specify a different html file to use as a template. The only filename that works is index.html.

How can I tell my application using the vue.config.js file or vue-cli-service command line to use a different html file as a template to inject the appliction in?

This is what I already tried:

1) setting the indexPath property

// in vue.config.js

defineConfig({
  indexpath: "module.html"
  //...
})

Result: No change, index.html is still being used to render the page.

2) Using historyApiFallback

// in vue.config.js

defineConfig({
  devServer: {
    historyApiFallback: {
      index: "module.html",
    }
    // ...
  }
  // ...
})

Result: No change, index.html is still being used to render the page.

3) using the pages property

Using the pages property should allow me to configure the html-webpack-plugin to use a different file.

// in vue.config.js

defineConfig({
  pages: {
    index: {
      entry: "src/module.js",
      template: "module.html",
    }
  }
  // ...
})

Result: This creates the following error in the console:

Conflict: Multiple assets emit different content to the same filename index.html

Which makes me think, there must be a way outside of pages to set a different filename, which the application is trying to use. I don't see it however and have no idea where to look any more.

vbarbarosh · Accepted Answer · 2024-05-20 09:57:05Z

1

indexPath with chainWebpack was a solution in our case:

const {defineConfig} = require('@vue/cli-service');

module.exports = defineConfig({
    indexPath: 'index.php',
    chainWebpack: function (config) {
        config.plugin('html').tap(function (options) {
            options[0].template = './public/index.php';
            options[0].minify = false;
            return options;
        });
    },
});

answered May 20, 2024 at 9:57

vbarbarosh

3,7124 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

duckstery · Accepted Answer · 2023-11-10 10:06:14Z

0

Correct me if I'm wrong. You are trying to create multiple layout for your Vue application right?

If that is the case, you should use vue-router nested routes to create an actual layout.

You can look at here for more detail https://stackblitz.com/edit/vue-t1uatq

answered Nov 10, 2023 at 10:06

duckstery

1914 bronze badges

4 Comments

lukastillmann Over a year ago

Unfortunately, no. I am trying to create another application that re-uses some of the code of the initial one. But it needs to be deployed and shipped separately

duckstery Over a year ago

If that is the case, I recommend you trying to create a package or library instead. Then publish it to npm. When you want to re-use, you can install it back. Every adjustment you made to your package, they'll be apply to your applications. Creating 2 applications with just one Vue project doesn't sound like a good idea. Because for example, if your application A need some modification. You apply it to your re-used logic. Then, you'll have to apply it to your application B (which is deploying maybe). And if you decide to not apply it for B, so why do you think of this idea in the first place?

lukastillmann Over a year ago

I agree in general. However that was not my question :-) I still think this should be possible. If I was creating the webpack config myself, I could probably figure it out. But I don't know how the vue-cli figures out the template path and what properties it uses under the hood. It works great usually, but it is not very transparent, I feel

duckstery Over a year ago

OK, I understand. Since you said you know Webpack. I think you should take a look at configureWebpack option. This hook can help you mutate Webpack config. Finally, since you've said you just need to change .html template, I suggest you to build the app. After that, create your own .html and embed div id="app" and Vue script in just like the output index.html. Hope this idea can help you somehow XD

Krolu80 · Accepted Answer · 2023-11-10 13:10:33Z

0

Did you tried to give absolute path to your html file here

setting the indexPath property

// in vue.config.js

defineConfig({
  indexpath: "module.html"
  //...
})

answered Nov 10, 2023 at 13:10

Krolu80

111 bronze badge

1 Comment

lukastillmann Over a year ago

yes, I tried that.

Collectives™ on Stack Overflow

Vue-cli: Use template file other than index.html

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related