Vuetify é um framework progressivo que tenta levar o desenvolvimento web para o próximo nível. Para melhor realizar esta tarefa, alguns sacrifícios tiveram que ser feitos em termos de suporte para versões antigas do Internet Explorer. Esta não é uma lista completa dos navegadores compatíveis, mas sim dos principais.

Vue-CLI 3 is the next generation cli tool made to help you get started more easily than before. When you start your app with vue-cli you will also be able to get the official webpack updates and config changes, as well as Vuetify's updates without an arduous upgrade process.

Once the cli is installed, you can generate a new project scaffold. Select the default install unless you have specific packages that you need to include (e.g. vuex or vue-router). This will create a new Vue project that's ready to go with your selected options.

Tip: If you already have vue-cli installed, make sure you are on the latest version by typing vue --version into your cli.

Now that you have an instantiated project, you can add the Vuetify package using the cli.

This will provide you with a set of options for customizing your installation. The default preset has a-la-carte already enabled for you.

After installation simply run yarn serve or npm run serve to start your application.

Para incluir o Vuetify em um projeto existente, você deve inseri-lo em seu node_modules. Você pode usar npm ou yarn para realizar esta tarefa. Estes são ambos gerenciadores de pacotes nos quais permitem que você controle quais recursos estarão disponíveis na sua aplicação.

Para obter uma explicação detalhada de como executar o npm em seu ambiente, confira a documentação oficial. Alternativamente, se você deseja usar o yarn, você pode encontrar a documentação oficial aqui. Uma vez configurado, você pode executar qualquer comando do seu prompt de comando.

Uma vez que o Vuetify tenha sido instalado, navegue até o ponto de entrada principal da sua aplicação. Na maioria dos casos, isso estará em index.js oumain.js. Neste arquivo você importará Vuetify e informará ao Vue para utilizá-lo.

Você também precisará incluir o arquivo CSS do Vuetify. Basta incluir o arquivo CSS do Vuetify em seu index.html ou importar o arquivo stylus ou o CSS minificado.

Alguns components, como o seletor de data, usam Material Design Icons. A maneira mais fácil de incluir os ícones é colocando a tag link no seu arquivo index.html.

Alternativamente você pode usar o npm ou o yarn para instalar 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 testar usar o Vuetify.js sem instalar um modelo da Vue CLI, copie o código abaixo em seu index.html. Isso carregará a versão mais recente do Vue e do Vuetify, permitindo que você comece a brincar com os componentes. Você também pode usar o iniciador Vuetify no codepen.

Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11 and Safari 9/10. If you are using vue-cli-3, this is done automatically for you. Otherwise, in your project directory, you can install babel-polyfill:

Devido ao suporte limitado do Internet Explorer para tags <template>, você deve enviar elementos do dom totalmente compilados para o navegador. Isso pode ser feito tanto construindo antecipamente seu código Vue quanto criando componentes auxiliares para substituir os elementos do DOM. Por exemplo, se for enviado diretamente para o IE, isso falhará:

It is recommended that you use babel-preset-env with the corresponding polyfill to ensure only the necessary polyfills are added to your application. For more information on babel-present-env, visit the documentation

Once installed, add the preset to your .babelrc or babel.config.js

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: