How to remove warning in vue to configure feature flags to esm module bundling: Laravel Mix

In Laravel, when using Laravel mix to bundle assets and utilizing Vue 3 for your frontend, you may run into a warning in your console that can be confusing:

app.js:31032 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

Obviously, you want proper tree shaking to take place, so how do you do that with Laravel mix?

You need to update your webpack configuration in your projects webpack.mix.js file using the DefinePlugin.
After mix is declared, add the following:

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.DefinePlugin({
                __VUE_OPTIONS_API__: true, // If you are using the options api.
                __VUE_PROD_DEVTOOLS__: false, // If you don't want people sneaking around your components in production.
            }),
        ],
    }
})

As you see, it is pretty simple, and ensures you will get proper tree shaking in the final bundle as well as get rid of that annoying console warning.