title: How do I add Vuetify 2.0 to an existing project?
body: <p>I've recently upgraded from Vuetify 1.5 to Vuetify 2.0 and I'm having trouble getting it to work. I feel like I'm missing something.</p>
  
  <p>I downloaded the newest Vuetify package and the @mdi/font package as well. I've followed the instructions in the docs, as far as I can tell: I've added the plugins folder with the vuetify.js file, and as far as I can tell, I've instantiated Vuetify into my Main.js file properly, but none of the stylings appear in my app. I've also tried adding a  element tag to my project in various places (my App.vue file and various other page files), but all that seems to do is break things even more; I either get an element to appear on the DOM with no stylings, or the DOM comes up completely white.</p>
  
  <p>Here is my vuetify.js file:</p>
  
  <pre><code>import Vue from "vue";
  import Vuetify from "vuetify";
  import "@mdi/font/css/materialdesignicons.css";
  
  Vue.use(Vuetify);
  
  export default new Vuetify({
    icons: {
      iconfont: "mdi"
    }
  });
  </code></pre>
  
  <p>Here is my main.js file:</p>
  
  <pre><code>import Vue from "vue";
  import App from "./App.vue";
  import router from "./Router";
  import Vuetify from "@/plugins/vuetify";
  import 'vuetify/dist/vuetify.min.css'
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    Vuetify,
    render: h =&gt; h(App)
  }).$mount("#app");
  </code></pre>
  
  <p>Here is my App.vue file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;Header /&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Header from "./components/Layout/Header";
  import Home from "./components/Home";
  import InstructorProfile from "./components/InstructorProfile";
  import ClassRoster from "./components/ClassRoster";
  import Footer from "./components/Layout/Footer";
  
  export default {
    name: "app",
    components: {
      Header,
      Home,
      InstructorProfile,
      ClassRoster,
      Footer
    },
    data() {
      return {};
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>As I mentioned before, I have tried adding  elements to this file, both like this:</p>
  
  <pre><code>&lt;v-app&gt;
      &lt;div id="app"&gt;...&lt;/div&gt;
  &lt;/v-app&gt;
  </code></pre>
  
  <p>And like this:</p>
  
  <pre><code>&lt;div id="app"&gt;
       &lt;v-app&gt;...&lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But neither seemed to work better than the other.</p>
  
  <p>I'd like to know if there's something I've left out or I've done wrong.
  Any help is much appreciated. Thank you in advance.</p>