Vue js CLI 3 fail to build with Thymeleaf syntax

Question

I'm working on a little multi-page application based on Vue.js CLI 3 and Spring boot for the backend.

I read the official doc to build a multi page, so my vue.config.js looks like:

module.exports = {
    outputDir: 'target/dist',
    pages: {
        home: {
            entry: 'src/home/home.js',
            template: 'src/home/home.html',
            filename: 'home.js'
        },
        otherPage: {...}
    }
}

Everything works fine, until I add some Thymeleaf syntax in my templates (e.g. with placholders ${text}). The build fails because of the ${} placeholders which are not resolved (I don't know which loader or plugin try to resolve thoses placeholders, I use the standard vue-cli webpack project structure..).

Is there a way to configure webpack in order to ignore the Thymeleaf syntax and to not trying to resolve thoses placeholders?

use html-loader. But it won't be enough. Also filename is the destination path. So it should be html — atilkan
– atilkan, Commented Oct 10, 2018 at 14:26

Edison Nguyen · Accepted Answer · 2020-02-13 10:14:08Z

1

I replaced $ by <%="$"%> as workaround.

But it's not work for <script></script>

<script>
    var user = <%="$"%>{user};
</script>

Then I found solution

<script th:inline="javascript">
/*<![CDATA[*/
    var user = /*[[<%="$"%>{user}]]*/ 'default';
/*]]>*/
</script>

answered Feb 13, 2020 at 10:14

Edison Nguyen

112 bronze badges

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

Collectives™ on Stack Overflow

Vue js CLI 3 fail to build with Thymeleaf syntax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related