Laravel初心者です。
Lravelを使って、認証機能を作成し、
ログイン後にVue CLIとVuexを使って制作したアプリケーション(SPA)を表示したいと思っております。

認証機能は、Laravelに標準装備のAuthを利用して作成しており、laravel/uiはVueのものを利用して作りました。
認証機能はきちんと動作しています。

困っていること

ログイン後Vuexで作ったアプリが表示されるかと思ったのですが、表示されず、コンソールには、以下のようなエラーが出てしまいます。Vuexがきちんと機能していないのだろうとはわかりました。

このエラーについて調べてみたのですが、Laravelで発生している例は見つけられず、
何を参考にしたら良いかわからない状態です。
また、Vuexだけで作った時に、利用したmain.jsファイルはLaravelの方に移行する場所がわからず、移行できておりません。

もし、解決策をご存知の方がいらっしゃいましたら、ご教示頂けますと、幸いです。
よろしくお願い致します。不足している情報がありましたら、遠慮なくおっしゃってください。

説明](dac54177df275d6c9eec145cbdb7057b.png)

Vuexを使ったアプリ部分のコード

// /resources/js/components/ExampleComponent.vue
<template>
    <div class='app'>
    <v-col :key='12'
      cols=12 sm=10 md=8 lg=4 xl=3>
    <v-app-bar
    app 
    color='#B2EBF2'
    >
      <div>
        <h1>Equipment Manager</h1>
      </div>
    </v-app-bar>

    <v-main>
      <v-form v-on:submit.prevent='onclick'>
        <label for='name'>品目名：</label>
        <v-text-field class='mb-0' label='品目名を入力してください。' 
          single-line solo 
          id='name' v-model='name' required></v-text-field>
        <v-btn class='mt-0 mb-5' type='submit'>登録</v-btn>
      </v-form>
      <ul v-for='(item, index) in items' :key='index'>
        <li>
          {{ item.name }}
          <div>
            <v-btn class='btn' color='#80DEEA' v-on:click='deleteItem(item.d)'>DELETE</v-btn>
            <v-btn class='btn' color='#80DEEA' v-on:click='plus(item.d)'>PLUS</v-btn>
            {{ item.count }}
            <v-btn class='btn' color='#80DEEA' v-on:click='minus(item.d)'>MINUS</v-btn>
          </div>
        </li>
      </ul>
    </v-main>
    </v-col>
    </div>
</template>

<script>
import store from './store/index.js'

export default {
  name: 'app',
  computed: {
    items() {
      return this.$store.getters.items
    },
    count() {
      return this.$store.getters.items.count
    }
  },
  data() {
    return {
      name: '',
      d: ''
    }
  },
  methods: {
    onclick() {
      this.$store.commit('addItem', {
        item: {
          name: this.name,
          count: 0,
          d: new Date()
        },
      })
      this.name = ''
    },
    deleteItem(d) {
      this.$store.commit('deleteItem', d)
    },
    plus(d) {
      this.$store.commit('plus', d)
    },
    minus(d) {
      this.$store.commit('minus', d)
    }
  }
};
</script>

VuexのStore部分のコード

// resources/js/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: []
  },

  getters: {
    items(state) {
      return state.items;
    },
    count(state) {
      return state.items.count;
    }
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    addItem(state, payload) {
      state.items.push(payload.item);
    },
    deleteItem(state, d) {
      let indexed = state.items.findIndex(item => item.d === d);
      state.items.splice(indexed, 1);
    },
    minus(state, d) {
      let indexed = state.items.findIndex(item => item.d === d);
      state.items[indexed].count --;
    },
    plus(state, d) {
      let indexed = state.items.findIndex(item => item.d === d);
      state.items[indexed].count ++;
    }
  },
  actions: {
  },
  plugins: [createPersistedState({ storage: window.sessionStorage })]

})

// resources/views/home.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>

<example-component></example-component> // これがVueアプリのコンポーネント
@endsection

フォルダの構成

Laravelプロジェクトのフォルダ構成は以下のようになっております。

補足1

補足2

以下が、Vuexで制作した時は使ったのに、Laravelでは、配置場所がわからず、利用していないファイルです。

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

補足2

回答実践後にnpm run devしてみると...

ERROR in ./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js&)

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

回答1件

ベストアンサー

まずblade内容を修正した方がいいかと思います
mixしてる場合下記が必ずある

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>

<script src="{{ mix('js/app.js') }}"></script>

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

以下追記
// app.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify'

//-------------------- ここの設定はそれぞれおまかせ --------------------------------//
import router from '@/router'
import GlobalComponents from '@/globalComponents'
(例)
/**
 * Global Components
 */
import Navigation from '@/components/Header/Navigation'

const GlobalComponents = {
  install(Vue) {
    Vue.component('appNavigation', Navigation)
  },
}

export default GlobalComponents

Vue.use(GlobalComponents)
//-------------------------------------------------------------//

new Vue({
  router,//必要ないならコメントアウト
  vuetify,
  render: h => h(App),
  components: { App },
}).$mount('#app')

//webpack.mix.js
一番簡単な方法
const mix = require('laravel-mix')

mix
  .js('resources/js/app.js', 'public/js')
  .extract(['axios', 'vue', 'vuetify', 'vuex', 'vue-router'])
  .setPublicPath('public')
  .sass('resources/sass/app.scss', 'public/css')
  .webpackConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'resources/js/'),
      },
    },
  })
  .version()

ダイナミックロードする場合追加
mix.webpackConfig({
    plugins: []
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "resources/js/"),
            Api: path.resolve(__dirname, "resources/js/api/"),
            Components: path.resolve(__dirname, "resources/js/components/"),
            Container: path.resolve(__dirname, "resources/js/container/"),
            Views: path.resolve(__dirname, "resources/js/views/"),
            Helpers: path.resolve(__dirname, "resources/js/helpers/"),
        },
    },
    output: {
        chunkFilename: mix.inProduction()
            ? "prod/chunks/[name].js?id=[chunkhash]"
            : "dev/chunks/[name].js?id=[chunkhash]",
    },
});

最後に
npm run dev || npm run watch || npm run watch-poll || npm run prod

わからなければ公式サイト参照
https://laravel.com/docs/8.x/mix

投稿2020/09/27 15:57