{"id":3353,"date":"2020-10-30T00:00:00","date_gmt":"2020-10-30T00:00:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/"},"modified":"2024-07-22T12:13:40","modified_gmt":"2024-07-22T12:13:40","slug":"jak-zlepsit-aplikace-vue-js-nekolik-praktickych-tipu","status":"publish","type":"post","link":"https:\/\/thecodest.co\/cs\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/","title":{"rendered":"Vylep\u0161en\u00ed aplikace Vue.js. N\u011bkolik praktick\u00fdch tip\u016f"},"content":{"rendered":"\n<p><strong>Creating applications in <a href=\"https:\/\/thecodest.co\/cs\/blog\/hire-vue-js-developers\/\">Vue<\/a><\/strong> is really simple as such, but if you want to build good quality applications, you\u2019re up for a bit more of a challenge.<\/p>\n\n\n\n<p>Being a part of <strong><a href=\"https:\/\/thecodest.co\/\">The Codest<\/a><\/strong> <a href=\"https:\/\/thecodest.co\/cs\/dictionary\/how-to-lead-software-development-team\/\">team<\/a> and real advocate of <em>Vue technology<\/em>, I want to share some <em>tips<\/em> (not copied from official Vue docs) which will effortlessly improve <a href=\"https:\/\/thecodest.co\/cs\/dictionary\/what-is-code-refactoring\/\">code<\/a> quality and the <strong>performance of Vue applications<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">First off, apply the Vue Style Guide and ESLint<\/h2>\n\n\n\n<p>I don\u2019t want to repeat what has already been said. There\u2019s a style guide in Vue docs:<br><a href=\"https:\/\/vuejs.org\/v2\/style-guide\/\">Vue 2 docs &#8211; style guide<\/a> or<br><a href=\"https:\/\/v3.vuejs.org\/style-guide\/\">Vue 3 docs &#8211; style guide<\/a><\/p>\n\n\n\n<p>You can find there four Rule categories. We really care about three of them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Essential<\/code> rules preventing <a href=\"https:\/\/thecodest.co\/cs\/blog\/why-us-companies-are-opting-for-polish-developers\/\">us<\/a> from errors,<\/li>\n\n\n\n<li><code>Recommended<\/code> and <code>strongly recommended<\/code> rules for keeping best practices \u2013 to <em>improve quality<\/em> and readability of code.<\/li>\n<\/ul>\n\n\n\n<p>You may think\u2026 \u201cWhat?! Do I have to remember every rule?\u201d Of course you don\u2019t. You can use ESLint to take care of those rules for you. You just have to set everything properly in the ESLint configuration file. <strong>I suggest using the <code>recommended<\/code> preset<\/strong> as you get a totally free set of rules that help you in building apps with good practices. How to set it up?<\/p>\n\n\n\n<p>By default, you should find <code>extends<\/code> key in ESLint config and replace <code>\"plugin:vue\/essential\"<\/code> with <code>\"plugin:vue\/recommended\"<\/code>, that\u2019s all.<\/p>\n\n\n\n<p>Of course, there\u2019s a few rules you should remember, because ESLint cannot handle everything on its own. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>consistent naming,<\/li>\n\n\n\n<li>events naming in kebab-case,<\/li>\n\n\n\n<li>prefixing <code>$_namespace_<\/code> private properties in plugins, mixins, etc.,<\/li>\n\n\n\n<li>single file component top level element order.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Don\u2019t use multiple v-if<\/h2>\n\n\n\n<p>It may sometimes be necessary to render conditionally more than 1 element, but people often write something like that:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">content\n\ncontent\n\ncontent<\/code><\/pre>\n\n\n\n<p>It\u2019s unnecessary because we can write it more elegantly:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code> &lt;template v-if=\"condition\"&gt;\n   &lt;div&gt;content&lt;\/div&gt;\n   &lt;div&gt;content&lt;\/div&gt;\n   &lt;div&gt;content&lt;\/div&gt;\n &lt;\/template&gt;<\/code><\/code><\/pre>\n\n\n\n<p>But what if we want to do it as a root element? In <strong><a href=\"https:\/\/thecodest.co\/services\">Vue<\/a><\/strong>, we can\u2019t use <code>&lt;template&gt;<\/code> for this purpose. In some cases, wrapping in div could be enough.<\/p>\n\n\n\n<p>That\u2019s ok, but, as much as we may want, sometimes we can\u2019t wrap elements in div, for example, because of html semantic (e.g. <code>&lt;li&gt;<\/code> has to be a direct child of <code>&lt;ul&gt;<\/code> or <code>&lt;ol&gt;<\/code>). So when we have to write:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code> &lt;li\n   v-for=\"item in items\"\n   :key=\"item.id\"\n >\n   (( item.name ))\n &lt;\/li><\/code><\/code><\/pre>\n\n\n\n<p>&#8230;and we\u2019ll see an error like that :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/2020-01-23_10h41_45.png\" alt=\"Vue js code\" title=\"Vue js code\"\/><\/figure>\n\n\n\n<p>We can deal with it by <strong>using JSX and a functional component<\/strong>, also we should pass a boolean and it will replace the v-if.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;\/&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Don\u2019t write api call handlers in components<\/h2>\n\n\n\n<p>Actually, this is only one of the examples of what you shouldn\u2019t do in components. Simply do what is locally necessary in components logic. Every method that could be external should be separated and only called in components e.g. business logic.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<p>Instead of a method like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">created() (\nthis.fetchArticles();\n<code>),<\/code>\nmethods: (\n async fetchArticles() (\n  try (\n    const <a href=\"https:\/\/thecodest.co\/cs\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a> = await axios.get(url);\n    this.articles = data.articles;\n    ) catch (e) (\n    \/\/ handle error\n    )\n  )\n)<\/code><\/pre>\n\n\n\n<p>Write something like this \u2013 just call the proper method that will return <a href=\"https:\/\/thecodest.co\/cs\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a> results:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code> async fetchArticles() (\n   try (\n     this.articles = await ArticlesService.fetchAll();\n   ) catch (e) (\n     \/\/ handle error\n   )\n  )<\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Use slots instead of large amounts of props<\/h2>\n\n\n\n<p>Sometimes using props is just enough, but there are also cases when they are not efficient. It may happen in situations where we would have to add too many props to make the component work like we want it to. The simplest example could be a button component. Without any doubt, it\u2019s a component which could be used anywhere in an application. So, let\u2019s consider a button component like this one.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">\n(( text ))\n&lt;\/><\/code><\/pre>\n\n\n\n<p>At this stage, it\u2019s a simple component which accepts only text prop. Ok, but it may not be enough as we will need icons in the button. In this case, we have to add another 2 props (2, because we want to have the option to add before or after text). So, the component will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">\n(( text ))\n&lt;\/><\/code><\/pre>\n\n\n\n<p>It\u2019s not bad, we have only 3 props, but\u2026<\/p>\n\n\n\n<p>What if we need a loading indicator? Well, we would have to add another prop. And that\u2019s for every new feature! Does keeping up with the growth of the number of components sound challenging now? Yes, it does, definitely!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Let\u2019s use slots instead<\/strong>.<\/h3>\n\n\n\n<p>Simpler, right? Ok, but how can we get the add icon feature? It\u2019s really easy! Just use the component like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">Back\n\nNext<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Easy way to improve performance<\/h2>\n\n\n\n<p>I will share with you some tips that are really easy to implement, so you can instantly benefit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lazy load routes<\/h3>\n\n\n\n<p>Sometimes we would have routes are available only for admins, or user with particular access, they may also be visited less than others. They are perfect cases for using the lazy load route.<\/p>\n\n\n\n<p>Just use the arrow function in your component property to return import function:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code> export default new VueRouter (\n   (\n     mode: 'history',\n     routes: [\n       (\n         path: '\/landing',\n         component: () => import('..\/pages\/p-welcome'),\n         name: 'welcome'\n       ),\n  \u2026<\/code><\/code><\/pre>\n\n\n\n<p>Instead of:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">import PWelcome from '@\/pages\/p-welcome';\n\nexport default new VueRouter (\n(\nmode: 'history',\nroutes: [\n(\npath: '\/landing',\ncomponent: PWelcome, \/\/just imported component\nname: 'welcome'\n),<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Lazy loading Vue components<\/h2>\n\n\n\n<p>A similar situation may happen with <strong>Vue components<\/strong>. We can lazily import single file components like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const lazyComponent = () => import('pathToComponent.vue')\nexport default (\ncomponents: (lazyComponent )\n)\n\n\/\/ Another syntax\nexport default (\ncomponents: (\nlazyComponent: () => import('pathToComponent.vue')\n)\n)<\/code><\/pre>\n\n\n\n<p>Thanks to the lazy load of that component, it will be downloaded only when&nbsp; requested. For example, if we have a component with v-if, it will be requested only if the component is to render. So unless the v-if value is true, the component will not be loaded. That\u2019s why lazy importing can be also used for <strong><a href=\"https:\/\/thecodest.co\/cs\/dictionary\/why-is-javascript-so-popular\/\">JavaScript<\/a> files<\/strong>.<\/p>\n\n\n\n<p>Bonus: <strong>When using Vue CLI 3+, every lazily loaded resource is prefetched by default!<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/2020-01-23_15h12_32.png\" alt=\"vue js development\" title=\"vue js development\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Use transparent wrappers instead of attribute props<\/h2>\n\n\n\n<p>Consider a component like this one:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code> &lt;template&gt;\n   &lt;input\n     :value=\"value\"\n     class=\"base-input\"\n     @input=\"$emit('input', $event.target.value)\"\n   &gt;\n &lt;\/template&gt;<\/code><\/code><\/pre>\n\n\n\n<p>Without any problems, we can use it like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><\/code><\/pre>\n\n\n\n<p>or<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<p>It works, because <a href=\"https:\/\/thecodest.co\/blog\/vue-js-basics-tutorial\/\">Vue<\/a> allows you to pass html attributes to the component, even if you didn\u2019t declare them as props. The html attributes are applied to the component\u2019s root element (input, in this case).<\/p>\n\n\n\n<p>The problem appears when we want to expand our input component, since it could look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code> &lt;template>\n   &lt;div class=\"form-group\">\n     &lt;label :for=\"id\">(( label ))&lt;\/label>\n     &lt;input\n       :id=\"id\"\n       :value=\"value\"\n       class=\"base-input\"\n       @input=\"$emit('input', $event.target.value)\"\n     >\n   &lt;\/div>\n &lt;\/template><\/code><\/code><\/pre>\n\n\n\n<p>Now, using the component this way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code> &lt;base-input\n   v-model=\"text\"\n   type=\"text\"\n   placeholder=\"Write something\"\n \/&gt;<\/code><\/code><\/pre>\n\n\n\n<p>will not work like we want, because the type and the placeholder will be applied to div (root element) and that\u2019s make no sense. So, we need to deal with it, because we want to add our attributes to the input element. Your first thought may be \u201clet\u2019s add the props we need!\u201d and of course that will work, but\u2026 what if we want to use <code>type<\/code>, <code>autocomplete<\/code>, <code>placeholder<\/code>, <code>autofocus<\/code>, <code>disabled<\/code>, <code>inputmode<\/code>, etc., then we have to define the props for every html attribute. I personally don\u2019t like this lengthy method, so&nbsp; let\u2019s look for something better!<\/p>\n\n\n\n<p>We can deal with the whole problem in <strong>just two lines.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;template>\r\n  &lt;div class=\"form-group\">\r\n    &lt;label :for=\"id\">(( label ))&lt;\/label>\r\n    &lt;!-- pay attention to v-bind=\"$attrs\" -->\r\n    &lt;input\r\n      :id=\"id\"\r\n      v-bind=\"$attrs\"\r\n      :value=\"value\"\r\n      class=\"base-input\"\r\n      @input=\"$emit('input', $event.target.value)\"\r\n    >\r\n  &lt;\/div>\r\n&lt;\/template>\r\n\r\n&lt;script>\r\nexport default (\r\n  name: 'BaseInput',\r\n  inheritAttrs: false, \/\/ &lt;- pay attention to this line\r\n  props: ['value', 'label', 'id']\r\n);\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>We can use <code>v-bind=\"$attrs\"<\/code> and pass attributes directly to <code>&lt;input><\/code> without declaring huge amounts of props. Also, remember about adding the option <code>inheritAttrs: false<\/code> to disable passing the attributes to the root element. Let\u2019s go a bit further: what if we need to add event listeners to this input? Again, it could be handled by props or custom events, but there\u2019s a better solution.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;template>\r\n  &lt;div class=\"form-group\">\r\n    &lt;label :for=\"id\">(( label ))&lt;\/label>\r\n    &lt;!-- pay attention to v-on=\"listeners\" -->\r\n    &lt;input\r\n      :id=\"id\"\r\n      v-bind=\"$attrs\"\r\n      :value=\"value\"\r\n      class=\"base-input\"\r\n      v-on=\"listeners\"\r\n    >\r\n&lt;\/div>\r\n&lt;\/template>\r\n\r\n&lt;script>\r\nexport default (\r\n  name: 'BaseInput',\r\n  inheritAttrs: false,\r\n  props: ['value', 'label', 'id'],\r\n  computed: (\r\n    listeners() (\r\n      return (\r\n        ...this.$listeners,\r\n        input: event => this.$emit('input', event.target.value)\r\n      );\r\n    )\r\n  )\r\n);\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>There\u2019s a new computed property that returns the component for listeners and adds the input listener. We use that computed input by simply writing <code>v-on=\"listeners\"<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use watcher with the immediate option instead of the created hook and watcher together<\/h2>\n\n\n\n<p>We often fetch some data on a created (or mounted) hook, but then we need fetch that data with every change of a property, e.g., current page of pagination. Some tend to write it down like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;script>\r\nexport default (\r\n  name: 'SomeComponent',\r\n  watch: (\r\n    someWatchedProperty() (\r\n      this.fetchData();\r\n    )\r\n  ),\r\n  created() (\r\n    this.fetchData();\r\n  ),\r\n  methods: (\r\n    fetchData() (\r\n      \/\/ handle fetch data\r\n    )\r\n  )\r\n);\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Of course, it works, but\u2026 It\u2019s not the best approach, not even a good one. So, let\u2019s check how we can refactor this, An example of not so bad approach:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;script>\r\nexport default (\r\nname: 'SomeComponent',\r\nwatch: (\r\n  someWatchedProperty: 'fetchData'\r\n),\r\n  created() (\r\n    this.fetchData();\r\n  ),\r\n  methods: (\r\n    fetchData() (\r\n      \/\/ handle fetch data\r\n    )\r\n  )\r\n);\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>The above version is better because another method is not necessary, we only named a method that should be called on to change watchedProperty.<\/p>\n\n\n\n<p>An even better approach:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;script>\r\n  export default (\r\n    name: 'SomeComponent',\r\n    watch: (\r\n      someWatchedProperty: (\r\n        handler: 'fetchData',\r\n        immediate: true\r\n      )\r\n    ),\r\n    methods: (\r\n      fetchData() (\r\n        \/\/ handle fetch data\r\n      )\r\n    )\r\n  );\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>We got rid of the created hook. By adding the option \u2018immediate,\u2019 we make that component call on the fetchData method immediately after the start of the observation (it\u2019s a bit before the created hook and after beforeCreated), so it can be used instead of the created hook.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vue.js tips summary<\/h2>\n\n\n\n<p>These tips will not make your application perfect but using them will quickly <strong>improve the quality of your code<\/strong>. Also, I hope you will find something of interest in the above examples.<\/p>\n\n\n\n<p>Note that some of them were simplified for the article&#8217;s purposes.<\/p>\n\n\n\n<p><strong>Read more:<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/javascript-is-totally-dead-some-dude-on-the-internet\/\">JavaScript Is Totally Dead. Some Dude on the Internet<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\">A Deeper Look at the Most Popular React Hooks<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/how-not-to-kill-a-project-with-bad-coding-practices\/\">Software Projects Where You Can Use JavaScript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue je rychle se rozv\u00edjej\u00edc\u00ed progresivn\u00ed framework pro vytv\u00e1\u0159en\u00ed u\u017eivatelsk\u00fdch rozhran\u00ed. Stal se frameworkem JavaScript s nejv\u011bt\u0161\u00edm po\u010dtem hv\u011bzdi\u010dek na GitHubu a nejl\u00e9pe hodnocen\u00fdm projektem roku 2016 a 2017 na stejn\u00e9m port\u00e1lu.<\/p>","protected":false},"author":2,"featured_media":3354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Vue.js app improvement. Some practical tips - The Codest<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/cs\/blog\/jak-zlepsit-aplikace-vue-js-nekolik-praktickych-tipu\/\" \/>\n<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js app improvement. Some practical tips\" \/>\n<meta property=\"og:description\" content=\"Vue is a rapidly growing progressive framework for building user interfaces. It became the JavaScript framework with the most stars on GitHub and the most highly starred project of 2016 and 2017 on in the same portal.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/cs\/blog\/jak-zlepsit-aplikace-vue-js-nekolik-praktickych-tipu\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-30T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-22T12:13:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/how_to_improve_vue.js_apps__some_practical_tips.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Vue.js app improvement. Some practical tips\",\"datePublished\":\"2020-10-30T00:00:00+00:00\",\"dateModified\":\"2024-07-22T12:13:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/\"},\"wordCount\":1369,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/how_to_improve_vue.js_apps__some_practical_tips.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"cs-CZ\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/\",\"name\":\"Vue.js app improvement. Some practical tips - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/how_to_improve_vue.js_apps__some_practical_tips.png\",\"datePublished\":\"2020-10-30T00:00:00+00:00\",\"dateModified\":\"2024-07-22T12:13:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#breadcrumb\"},\"inLanguage\":\"cs-CZ\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/how_to_improve_vue.js_apps__some_practical_tips.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/how_to_improve_vue.js_apps__some_practical_tips.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/how-to-improve-vue-js-apps-some-practical-tips\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js app improvement. Some practical tips\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cs-CZ\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/cs\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vylep\u0161en\u00ed aplikace Vue.js. N\u011bkolik praktick\u00fdch tip\u016f - The Codest","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/cs\/blog\/jak-zlepsit-aplikace-vue-js-nekolik-praktickych-tipu\/","og_locale":"cs_CZ","og_type":"article","og_title":"Vue.js app improvement. Some practical tips","og_description":"Vue is a rapidly growing progressive framework for building user interfaces. It became the JavaScript framework with the most stars on GitHub and the most highly starred project of 2016 and 2017 on in the same portal.","og_url":"https:\/\/thecodest.co\/cs\/blog\/jak-zlepsit-aplikace-vue-js-nekolik-praktickych-tipu\/","og_site_name":"The Codest","article_published_time":"2020-10-30T00:00:00+00:00","article_modified_time":"2024-07-22T12:13:40+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/how_to_improve_vue.js_apps__some_practical_tips.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Vue.js app improvement. Some practical tips","datePublished":"2020-10-30T00:00:00+00:00","dateModified":"2024-07-22T12:13:40+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/"},"wordCount":1369,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/how_to_improve_vue.js_apps__some_practical_tips.png","articleSection":["Software Development"],"inLanguage":"cs-CZ","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/","url":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/","name":"Vylep\u0161en\u00ed aplikace Vue.js. N\u011bkolik praktick\u00fdch tip\u016f - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/how_to_improve_vue.js_apps__some_practical_tips.png","datePublished":"2020-10-30T00:00:00+00:00","dateModified":"2024-07-22T12:13:40+00:00","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#breadcrumb"},"inLanguage":"cs-CZ","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/"]}]},{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/how_to_improve_vue.js_apps__some_practical_tips.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/how_to_improve_vue.js_apps__some_practical_tips.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Vue.js app improvement. Some practical tips"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cs-CZ"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/cs\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/comments?post=3353"}],"version-history":[{"count":10,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3353\/revisions"}],"predecessor-version":[{"id":8618,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3353\/revisions\/8618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/media\/3354"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/media?parent=3353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/categories?post=3353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/tags?post=3353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}