CODEWITHSUNDEEP
javascripthtmlvue.js
Xavier Peña
Xavier Peña

Reputation: 7909

Accents in `<component-name>.vue.html` are shown as �

I am using asp dotnet core for the backend.

This is how asp renders the page (notice how everything with meta etc seems correct, and my tests confirm this):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
    <base href="/" />

    <link rel="stylesheet" href="/dist/vendor.css?v=nmP2oJlipQWfe1Q9dKUoaAj31lKk6_m4owNSV9fEeqA" />

</head>
<body>

<!-- test from _Layout.cshtml to see if it is its fault -->
àéíôüàéíôüàéíôüàéíôüàéíôü
<!-- it renders it correctly, so it looks like it's Vue.js's fault -->


<div id='app-root'>Loading...</div>
    <script src="/dist/vendor.js?v=sZcVpAmM0vrf6nyPyorxXMMIanK-hAW1RhcF2ymtHfk"></script>    
    <script src="/dist/main.js?v=qjoWhD1Og3eISp302v-McamzVAlCEXm_3gssJzkUnKE"></script>
</body>
</html>

Now in app.vue.html, if I use this template:

<template>
    <div>
        àéíôüàéíôüàéíôüàéíôüàéíôü
    </div>
</template>

<style scoped src="./app.css"></style>
<script src="./app.ts"></script>

The website shows this:

àéíôüàéíôüàéíôüàéíôüàéíôü
�������������������������

<= the first line comes from _Layout.cshtml, while the second line comes from app.vue.html

The Vue version I am using is 2.5.16

Upvotes: 1

Views: 481

Answers (1)

bbsimonbb
bbsimonbb

Reputation: 29002

This should all just work. You have the utf-8 meta tag in your document. There is certainly no problem with Vue's handling of utf-8. Check your source files (app.vue.html), and your bundle. Open them in vs-code for example and you should see utf-8 on the right of the bottom status bar. Check the character encoding in the HTTP headers of everything, particularly the bundle. A .js bundle sent with bad HTTP encoding header would seem the most likely culprit.

Upvotes: 1

Related Questions