stevenh

I have tried changing APP_ENV to "production" and have changed webpack.mix.js as follows with no luck:

const mix = require('laravel-mix');

//MYCODE
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

    //MYCODE
    .webpackConfig(webpack => {
      return {
          plugins: [
            new VuetifyLoaderPlugin()
          ]
      };
    });

I just get the following error:

/vuetifyapp/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: Cannot find module 'vuetify-loader/lib/plugin'

Hi,

I haven't been able to get the new version of Vuetify (which has components à-la-carte) to work with Laravel.

The problem is related to not using Vue CLI 3. From the Vuetify documentation:

"If there is a reason you are unable to utilize the Vue CLI 3 package, you can manually install the vuetify-loader through your vue.config.js or webpack config."

"Vuetify loader - Keeping track of all the components you're using can be a real chore. The vuetify-loader alleviates this pain by automatically importing all the Vuetify components you use, where you use them. This will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed."

"Webpack installation - You can also explicitly install the loader for webpack based projects. Similar to the vue.config.js setup, you simply add the loader to your project's webpack plugins."

// webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ],
}

How do I use this code in webpack.mix.js?

@johnbraun Thanks a lot for your solution. I'll give it a try!

Hi,

I have a form in a vue component for entering a user's profile information. When the user has already created a profile, the form is populated with the data from an object $profile that is passed from the controller to the blade view and then passed to the vue component as the prop "profile".

When the user has no profile currently ($profile is null), I would like the form fields to be blank.

I'm not sure how to treat the prop "profile" in the component when the object does not exist.

The script of my vue component is as follows:

export default {
  mixins: [formSubmit],
  props: [
    "profile",
  ],
  data() {
    return {
      fields: {
        about: this.profile.about,
        website: this.profile.website,
        instagram: this.profile.instagram,
        facebook: this.profile.facebook,
      },
      snackbarString: "Saved"
    };
  },
  
  
  
};
</script>

When $profile is passed from the controller, it works fine but when the object does not exist yet, I get an undefined error in vue :

TypeError: Cannot read property 'about' of undefined

How should I deal with the object conditionally in the vue component?

Sorry if it's obvious...