<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>library | Bogdan's blog</title>
	<atom:link href="https://blog.bogdancarpean.com/tag/library/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.bogdancarpean.com</link>
	<description>Code and anything else.</description>
	<lastBuildDate>Fri, 24 Jan 2020 18:40:02 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.1.1</generator>

<image>
	<url>https://blog.bogdancarpean.com/wp-content/uploads/2022/12/icons8-pencil-drawing-96.png</url>
	<title>library | Bogdan's blog</title>
	<link>https://blog.bogdancarpean.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Vuetify upgrade to 2</title>
		<link>https://blog.bogdancarpean.com/vuetify-upgrade-to-2/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=vuetify-upgrade-to-2</link>
					<comments>https://blog.bogdancarpean.com/vuetify-upgrade-to-2/#respond</comments>
		
		<dc:creator><![CDATA[Bogdan]]></dc:creator>
		<pubDate>Thu, 22 Aug 2019 20:52:20 +0000</pubDate>
				<category><![CDATA[vuejs]]></category>
		<category><![CDATA[Vuetify]]></category>
		<category><![CDATA[components]]></category>
		<category><![CDATA[library]]></category>
		<category><![CDATA[vue]]></category>
		<category><![CDATA[vuetify]]></category>
		<guid isPermaLink="false">http://blog.bogdancarpean.com/?p=324</guid>

					<description><![CDATA[<p>This article shows you how to update Vuetify on your existing project built with Vuetify 1 to the newly released Vuetify 2. This assumes that you have a Vue project using the Vuetify components library. Since Vuetify 2 is adopting the new Google Material Design 2, please check after the update all your components for [&#8230;]</p>
The post <a href="https://blog.bogdancarpean.com/vuetify-upgrade-to-2/">Vuetify upgrade to 2</a> first appeared on <a href="https://blog.bogdancarpean.com">Bogdan's blog</a>.]]></description>
										<content:encoded><![CDATA[<p>This article shows you how to update Vuetify on your existing project built with Vuetify 1 to the newly released Vuetify 2. This assumes that you have a Vue project using the Vuetify components library.</p>
<p>Since Vuetify 2 is adopting the new Google Material Design 2, please check after the update all your components for style changes and adjust where needed.</p>
<p>First, two commands to remove the Vuetify 1 lib from your project and to add Vuetify 2 to your node_modules:</p>
<pre class="theme:github line-height:19 nums:false lang:default decode:true">npm remove --save vuetify</pre>
<pre class="theme:github line-height:19 nums:false lang:js decode:true">npm install --save vuetify@latest</pre>
<p>If you try to build your project at this point, you will likely get the following error:</p>
<pre class="theme:github line-height:19 nums:false lang:default decode:true">This dependency is not found:

* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js</pre>
<p>That is because Vuetify changed the style language from Stylus in Vuetify 1 to Sass in Vuetify 2. Find your <em>vuetify.js </em>config file (mine is in /src/plugins/vuetify.js) and do the following changes:</p>
<pre class="theme:github line-height:19 nums:false lang:default decode:true" title="vuetify.js">* Delete import 'vuetify/src/stylus/app.styl'

Replace with

import 'vuetify/dist/vuetify.min.css'</pre>
<p>In my Vuetify 1 project, I also had a custom primary color. This is how the instantiation of Vuetify changes on vuetify.js:</p>
<pre class="theme:github line-height:19 nums:false lang:default decode:true " title="vuetify.js">Before
======

Vue.use( Vuetify, {
           theme: {
             primary:'#01884e'
           }
        })

After
=====

Vue.use( Vuetify )

export default new Vuetify({
                     theme: {
                       themes: {
                         light: {
                           primary: '#01884e'
                         }
                       }
                     }
                   })
</pre>
<p>The only thing left is to add Vuetify in your Vue instance. This is done in main.js file:</p>
<pre class="theme:github line-height:19 nums:false lang:default decode:true " title="main.js">import Vuetify from '@/plugins/vuetify' //your path to vuetify.js file could be different

//then we add Vuetify to our Vue instance

new Vue({
      Vuetify
}).$mount('#app')</pre>
<p>Hoping this Vuetify 2 upgrade guide has helped you on how to update Vuetify without hassle, I wish you happy coding.</p>The post <a href="https://blog.bogdancarpean.com/vuetify-upgrade-to-2/">Vuetify upgrade to 2</a> first appeared on <a href="https://blog.bogdancarpean.com">Bogdan's blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.bogdancarpean.com/vuetify-upgrade-to-2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
