(rails×vue) 一つの単一コンポーネントファイルに他のコンポーネントファイルを読み込みたい

前提・実現したいこと

・rails6
・vue.js
・階層
app
-javascript
--packs
|_application.js
|_login.js
--login.vue
--users.vue

document.addEventListener('DOMContentLoaded', () => {
    const login_app = new Vue({
      render: h => h(Login)
    }).$mount()
    document.body.appendChild(login_app.$el)
    console.log(login_app)
})

のようなファイルを作り、erbで<%= javascript_pack_tag 'log_in' %>という形で表示しております。

発生している問題・エラーメッセージ

users.vueが表示れない。
原因が分からない。前提としてlogin.vueは表示されている。

該当のソースコード

//login.vue
<template>
    <div id="login">
       /*中略*/
    </div>
　　 <Users></Users><!-- 該当箇所 -->
</template>

<script>
import user from ./users; //該当箇所
/*中略*/
</script>

====================

//users.vue
<template>
  <div id="Users">
      users
  </div>
</template>

<script>
export default {
      name: "Users"
}
</script>

具体的な不具合

import User from ./usersの箇所で
vscodeがエラー文言を出しており、expression expectedとusers.vueが読み込まれていない。
また<Users></Users>の箇所もThe template root requires exacrly one elementというエラー文言が出ているため読み込まれない。
ネットに落ちていた情報を見様見真似で書いているのでそもそも、記法が合っているか分からないです。
またこのような方法以外にusers.vueをlogin.vueで表示する方法をご存知でしたら、
ご教示いただけると幸いです。
よろしくお願いします。

その他

users.vueに関しましては、login.jsのようなerbで読み込むためのjsファイルは作成しておりません。

行動規範の内容に同意します

回答1件

ベストアンサー

railsの知識は無いため、vueだけの問題であれば以下で解決できると思います。

template直下に任意のタグを追加し、全体を囲う

(おそらくインデントが他よりも右にずれていたのでご質問のソースの誤りかと思いますが、念の為m(_ _)m)

import文の誤りを修正

→ from以降のパスを引用符で囲う
→ user→Usersに変更

componentsの追加

→ script箇所は中略となっていたので、もしかしたら記述されているかもしれませんが念の為

上記の修正で表示できました。(users.vueの変更修正はありません。)

修正後のlogin.vueファイルのソースは以下になります。

vue
1//login.vue
2<template>
3  <div> ← divタグを追加
4    <div id="login">
5      /*中略*/
6    </div>
7    <Users></Users>
8  </div>
9</template>
10
11<script>
12import Users from './users'; ← user → Usersに変更 / from以降のパスを引用符で囲う
13
14export default {
15  components: {　← 追加
16    Users
17  }
18};
19/*中略*/
20</script>