Sin dudas este fue de los problemas que tuvimos al actualizar a Laravel Mix 6 para usar Tailwind 2.0 en nuestros proyectos de Laravel 8. Si seguiste la guía de como instalar Tailwind 2 con Laravel 8, te habrás dado cuenta que Laravel Mix no reconoce archivos .vue. Si bien este error era porque la actualización de Tailwind implicaba usar paquetes más actualizados que Laravel Mix 5 no lo podía procesar. En esta guía rápida voy a explicarte como actualizar correctamente Laravel Mix para que reconozca archivos template de Vue. (Extension .vue)

Actualización de Laravel Mix

Lo primero es actualizar nuestro package.json de npm para tener las ultimas versiones de Laravel Mix y Tailwind 2.0. Nuestro archivo necesita tener los siguientes scripts:

"scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
...

Reemplaza la parte de scripts con el código que te pase anteriormente. De esta manera, Laravel Mix 6 va a poder ejecutarse con los comandos.

Ahora pasemos a las dependencias de desarrollo, asegúrate de tener las siguientes dependencias en tu proyecto de Laravel:

"devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "alpinejs": "^2.7.3",
    "autoprefixer": "^10.1.0",
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.2.1",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^2.0.2"
},

"dependencies": {
     "vue": "^2.6.12"
}

Ahora nos queda actualizar nuestro proyecto para tener Laravel Mix 6 con Tailwind 2, junto con Vue y sus templates. Para ello ejecutamos el siguiente comando en nuestra terminal:

npm install

Una vez finalizada la instalación, ya tendremos funcionando Laravel Mix con Tailwind 2, sin agregar ningún paquete extra. En este momento al compilar nuestros archivos JavaScript y css vamos a notar que nos da error que no reconoce los archivos .vue y necesitamos un loader para configurar.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Configurar Mix para archivos .vue

Cabe destacar que es necesario que nuestros archivos template de Vue, tengan la extensión en minúsculas .vue. La primera configuración y única que hay que realizar para que nuestro proyecto reconozca archivos con extension vue es modificando el archivo webpack.mix.js. Este archivo se encuentra en nuestra carpeta raiz del proyecto, y contiene las configuraciones necesarias para que Laravel Mix compile los archivos.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Es necesario que agreguemos la función .vue() detrás de nuestro mix.js

mix.js(‘resources/js/app.js’, ‘public/js’).vue()

Ahora si nuestro proyecto lee archivos .vue en nuestro JavaScript. Esta fue una guía rápida de como actualizar Laravel Mix 6 para que funcione con Tailwind 2 y Vue.