Vuetify es un framework progresivo que intenta llevar al desarrollo web al siguiente nivel. Para poder cumplir con esta tarea de la mejor forma, algunos sacrificios se han tenido que hacer en materia de soporte para versiones más antiguas de Internet Explorer. Esta no es una lista exhaustiva de navegadores compatibles, pero de los que más comunmente se les da soporte.

Vue-CLI 3 es la herramienta cli (interfaz de línea de comandos) de nueva generación hecha para ayudarte a iniciar de una forma mucho más sencilla que antes. Cuando comienzas una app con vue-cli también podrás obtener las actualizaciones oficiales de webpack y los cambios en las configuraciones, así como actualizaciones de Vuetify sin tener que pasar por un proceso arduo de actualización.

Una vez que la cli ha sido instalado, puedes generar un nuevo scaffold de proyecto. Selecciona la instalaión default a menos que tengas paquetes específicos que necesites incluír (p.ej. vuex or vue-router). Esto creará un nuevo proyecto de Vue que está listo con tus opciones seleccionadas.

Tip: Si no quieres sobreescribir tu versión actual de vue-cli porque todavía necesitas vue init de la versión 2, trata esto.

Ahora que ya tienes un proyecto instanciado, puedes agregar el paquete de Vuetify usando la cli.

Ten en cuenta, que si estás instalando el paquete de Vuetify en un proyecto existente de vue-cli-3, debes asegurarte de tener un directorio limpio en caso de que haya problemas con el merge.

Después de la instalación, puedes correr el script dev que se encuentra en el archivo package.json. Esto iniciará un servidor de desarrollo local en https://localhost:8080.

Para incluir Vuetify en un proyecto existente, debes instalar su paquete de npm. Puedes usar ya sea npmo yarn para llevarlo a cabo. Ambos son administradores de paquetes que te permitirán controlar qué recursos están disponibles para tu aplicación.

Para una explicación detallada de cómo correr npm en tu ambiente, visita la documentación oficial. En otro caso, si deseas usar yarn, puedes encontrar la documentación oficial aquí. Una vez que hayas instalado alguno, puedes correr cualquier comando desde tu terminal.

Una vez que Vuetify ha sido instalado, navega al archivo principal de tu aplicación. En la mayoría de los casos, esto será index.js o main.js. En este archivo importarás Vuetify y le dirás a Vue que debe utilizarlo.

También necesitarás incluir el archivo css de Vuetify. Simplemente incluye el archivo css de Vuetify en tu index.html o importa el archivo de stylus o el archivo con el css minificado.

Algunos componentes como el date picker utilizan íconos de Material Design. La forma más fácil de incluir los íconos de Material Design es agregar una etiqueta link a tu archivo index.html

Una alternativa es usar npm o yarn para instalar el paquete material-design-icons-iconfont.

Vuetify can also be installed using Vue UI, the new visual application for vue-cli-3. Ensure that you have the latest version of vue-cli installed and from your terminal type:

This will start the Vue User Interface and open a new window in your browser. On the left side of your screen, click on Plugins. Once navigated, simply search for Vuetify in the input field.

After installation, you will have the option to configure your application's default Vuetify settings.

Para probar Vuetify.js sin instalar una plantilla de Vue CLI, copia el siguiente código en tu archivo index.html. Esto traerá la última versión de Vue y de Vuetify, permitiéndote comenzar a jugar con los componentes. Puedes también utilizar el Vuetify starter de codepen.

Es importante incluir el plugin tan pronto como sea posible dentro de tu archivo main.js. Si estás usando un paquete de Vuetify SSR, esto se deberá hacer en el archivo client-entry.js

Se recomienda que uses babel-preset-env con el polyfill correspondiente para asegurar que sólo se agregan los polyfills necesarios a tu aplicación. Para mayor información acerca de babel-present-env, visita la documentación

Una vez instalado, agrega el preset a tu archivo .babelrc o al archivo babel.config.js

Debido al soporte limitado de Internet Explorer para las etiquetas <template>, debes enviar elementos del DOM completamente compilados al navegador. Esto puede lograrse ya sea compilando tu código de Vue de antemano o creando componentes "helper" para reemplazar los elementos del DOM. Por ejemplo, si se envía lo siguiente directamente a IE, fallará:

Unfortunately vue-cli-3 doesn't automatically bring IE11 compatibility in which you may encounter various errors (such as Symbol is not defined). To assist in resolving these errors you may need to manually add transpileDependencies parameter in vue.config.js

Due to Internet Explorer's limited support for <template> tags, you must send fully compiled dom elements to the browser. This can be done by either building your Vue code in advance or by creating helper components to replace the dom elements. For instance, if sent directly to IE, this will fail: