Skip to content

Instantly share code, notes, and snippets.

@MiniGod
Last active January 14, 2021 11:29
Show Gist options
  • Save MiniGod/0fbc8ac28913cf0a68cfbdf23c0995b9 to your computer and use it in GitHub Desktop.
Save MiniGod/0fbc8ac28913cf0a68cfbdf23c0995b9 to your computer and use it in GitHub Desktop.
vue-i18n + vue-devtools bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Devtools bug repro</title>
</head>
<body>
<div id="anotherApp">Other app</div>
<div id="app">{{ $t('Hello World') }} {{ a }}</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@next"></script>
<script type="module">
// This bug appears to only happen when there's another app
Vue.createApp({}).mount("#anotherApp");
// timeout to make sure we have connection to vue devtools before creating app
setTimeout(() => {
const i18n = VueI18n.createI18n({
// other options don't seem to matter
legacy: true,
});
const app = Vue.createApp({
name: "AppWithI18n",
data() {
return { a: 1 };
},
mounted() {
// make the component re-render
this.a++;
},
}).use(i18n);
app.mount("#app");
}, 2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment