vue.jsのコンポーネントがIE11で表示されません。

Question

前提・実現したいこと

vueのコンポーネントをIE11で表示したいです。

vue.jsでwebアプリのフロントを実装しています。モジュール管理はnode.js ビルドはgruntで行なっています。
IE11でページを表示したところ、vueで実装したコンポーネントが全て表示されない状況でした。

HTMLはPugで記述しており、コンポーネントの埋め込みは、vueテンプレートの

Vue.component('hogehoge', {
  template: `
    `,

のhogehogeをタグ名として直接記述しています。

IEの開発者ツールでコードを見たところ、該当部分が<hogehoge></hogehoge>となっており、タグ名がテンプレートに置き換えられる処理が正常に行われていないようです。

当方初心者で原因が全く検討つかず、ここを確認して見ては？などささいなヒントでもいいので頂戴できればと思います。よろしくお願いいたします。

試したこと

BABELは導入済みです。

コンソール上のエラーは確認できません。

また、他のブラウザ（Chrome, Firefox, Edge, Safari)では正常に動作しています。

補足情報（FW/ツールのバージョンなど）

＜追記＞
どうやらコンポーネントを記述しているmain.jsをHTMLで読み込む位置に問題がありそうです。
HTMLはPugで記述しており、現在main.jsを最下部のfooter_scriptの中で読み込んでいます。
これをインポートしている外部ファイルのヘッダー内にスクリプトを読み込むと、ヘッダーとその中のコンポーネントは表示されるものの、bodyはブランクになります。

どこか適切な読み込み位置があるのか、それともHTML構造自体が不適切なのでしょうか？

Comments

[len_souko]

関係ないけど「東方初心者で」は”当方”です。

[len_souko]

また、ソースの表示だと記述したHTMLがそのまま表示されますので、要素の検証で確認してみてはいかがでしょうか？それと他のブラウザでは正常に動作しているのかどうかも必要な情報となるかと思われます。また、開発ツールのコンソールで何かエラーが出ているかもしれませんのでそちらの確認結果も書いておくと解決する蓋然性が高くなるかと思われます。

[isoppp]

簡単なサンプルソース（HTML/Javascript)を用意してまるごと掲載すると解決につながると思います。

Answer 1

【解決しました】

BABEL Polyfillを導入したことでコンポーネントが表示されるようになりました！トランスパイルの問題だったようです。修正依頼、回答いただいた方、ありがとうございました！

Answer 2

 template: `
    `,

IE11ではテンプレートリテラル``はまだ使えません。

【参考】
javascriptでIE11のみ動かない

Comments

[yu-smc]

回答ありがとうございます！BABELによるコンパイルで、ダブルクォートおよびバックスラッシュによる記法にトランスパイルされているので、その点は問題になっていないかと思います。

[euledge]

以前VueJS開発時に同様のことがあったもので、それが原因かと思ってしまいました。
先ほどオンラインの実行環境で確認したところ IE11でもテンプレートリテラル問題なかったのを確認しました。
ご提示の箇所以外に問題があるかもしれませんので new Vue()している箇所や、HTMLの部分など例示していただけると、何か気づくことできるかもしれません。

[yu-smc]

いえいえ、曖昧な質問に返答くださるだけでありがたいです。

new vue()は、Vue.componentを並べた後にjsファイルの最下部に記述しています。また、HTML内の読み込みについて質問の補足欄に追記しましたので、ご確認いただけますと幸いです。