非SPAのVueについて

Question

前提・実現したいこと

現在業務で、非SPAのLPやコーポレートサイトを作成しており、
jsの処理が絡むパーツなど、部分的にVueの単一ファイルコンポーネントを使っての作成を考えております。

SPAの場合だと、body直下に<div id="App"></div>などをおいて、そこを全体のルートコンポーネントにするかと思いますが、
LPやコーポレートサイトで部分的にVueアプリ化(仮想DOM化？)する場合、下記のような感じで複数のルートを作ることになるのでしょうか？

//サイドナビ
new Vue({
    el: '#sidenav',
    components: {
        'side-nav': require('../../component/sidenav.vue'),
        'side-navtop': require('../../component/sidenav_top.vue'),
    }
});

//ヘッダーフェイスブックモジュール
new Vue({
    el: '#fbapp',
    components: {
        'fb-app': require('../../component/fbapp.vue'),
    }
});

・・・

<div id="sidenav">
    <side-nav></side-nav>
</div>

<div id="fbapp">
    <fb-app></fb-app>
</div>

或いは、SPAのようにbody直下で<div id="App">ページ全体</div>などで、
vueで処理をしない部分も含めて、ページ全体をidで囲むほうがいいのでしょうか？
また或いは、より良い方法がありますでしょうか？

vueを初めて間もなく勝手がわからず…

どうかご教授をお願いいたします。

Answer 1

body直下の<div id="app"></div>だけでいい。
「この中ならどこでもVueコンポーネントが使える」という形。

Comments

[AkifumiShimoji]

早速のご回答ありがとうございます。
この場合vueで処理しない部分も含めて、仮想DOMに置き換わる形になると思いますが、
パフォーマンス的な問題やSEO的な問題はあったりしますか？
（それを言い出したらVueコンポーネントをやめろってことになっちゃいますかね…？）

Answer 2

上記のように、使いたい部分にVueを使用する方法で可能と思われます。
SPAではない単一のサイトですが、VueでUI制御しているページでしたら私のGitHubに過去に作ったものがございます。
参考になればと・・・

Comments

[AkifumiShimoji]

ご丁寧にソースまでご共有いただきありがとうございます。
やはり、使いたい部分に使用する形と、ページ全体に使用する形と双方適宜案件によって
使い分けるべき…という結論になりますかね。

[退会済みユーザー]

私は、使いたい部分だけに使用しております。
あまり広範囲に渡ってしまうと、開発時に単純なミスをしやすいものですので。