<?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>vue | Bogdan's blog</title>
	<atom:link href="https://blog.bogdancarpean.com/tag/vue/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:43:56 +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>vue | 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>
		<item>
		<title>How to @extend sass classes or use sass global variables in Vue components</title>
		<link>https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components</link>
					<comments>https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/#respond</comments>
		
		<dc:creator><![CDATA[Bogdan]]></dc:creator>
		<pubDate>Wed, 20 Mar 2019 04:16:21 +0000</pubDate>
				<category><![CDATA[css]]></category>
		<category><![CDATA[vuejs]]></category>
		<category><![CDATA[components]]></category>
		<category><![CDATA[sass]]></category>
		<category><![CDATA[vue]]></category>
		<guid isPermaLink="false">http://blog.bogdancarpean.com/?p=274</guid>

					<description><![CDATA[<p>Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage. Let&#8217;s [&#8230;]</p>
The post <a href="https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/">How to @extend sass classes or use sass global variables in Vue components</a> first appeared on <a href="https://blog.bogdancarpean.com">Bogdan's blog</a>.]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-image"><figcaption>Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage.</p>
<p style="text-align: left;">Let&#8217;s assume that you have a class that you want to extend</p>
<pre class="EnlighterJSRAW" data-enlighter-language="css" data-enlighter-theme="classic">src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}</pre>
<p style="text-align: left;">Assuming you generated your project with @vue/cli, you have to add the following statement to vue.config.js in order to have file visibility throughout your application</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}</pre>
<p style="text-align: left;">Then, you can use @extend on which component you want</p>
<pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;style lang="scss" scoped&gt;
.my_extended_class {
  @extend .my_class_to_extend;
}
&lt;/style&gt;</pre>
<p style="text-align: left;">Remember that you have to use sass in both extended and extender sheets for this to work.</p>
</figcaption></figure>The post <a href="https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/">How to @extend sass classes or use sass global variables in Vue components</a> first appeared on <a href="https://blog.bogdancarpean.com">Bogdan's blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
