質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

958閲覧

vue.jsでCDNで読み込んだコンポーネントのローカル登録について

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/03/17 02:44

laravelにてvue.jsを勉強中です。
app.jsに登録したvueコンポーネントについてですが、vueComp1.vueにてimport しているvuejsDatepickerが
vueComp2.vueにて定義されていない為、エラーが発生します。

vuecomp1.blade.php
→vueComp1

vuecomp2.blade.php
→vueComp2

vuejsDatepickerはvuecomp1.blade.phpにてCDNにて読み込んでいます。
(意図がありCDNでの動作を設定したいです)

vueComp1.vue内だけの利用をしたいのですが、どのようにすればよろしいでしょうか?
ローカル登録というものがあるらしいという情報がみたのですが・・・。

app.js

javascript

1Vue.component( 2 'vueComp1', 3 require('./components/app/vueComp1.vue').default 4) 5Vue.component( 6 'vueComp2', 7 require('./components/app/vueComp2.vue').default 8) 9 10if(document.querySelector('#app')){ 11 const app = new Vue({ 12 el: '#app' 13 }) 14}

vueComp1.vue

javascript

1<script> 2 export default { 3 components: { 4 'vuejs-datepicker1':vuejsDatepicker, 5 }, 6 data() { 7 return {

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

自己解決です。

CDNでの読込ではなく、インストールを実施。

command

1npm install vuejs-datepicker --save

app.jsに以下を追記

javascript

1import vuejsDatepicker from 'vuejs-datepicker' 2Vue.use(vuejsDatepicker)

vueComp1.vueに以下に変更

javascript

1<script> 2import vuejsDatepicker from "vuejs-datepicker"; 3 export default { 4 components: { 5 'vuejs-datepicker1':vuejsDatepicker, 6 }, 7 data() { 8 return { 9

この内容で正常に動作するようになりました。

投稿2020/03/31 04:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問