{"id":19516,"date":"2017-12-13T12:15:03","date_gmt":"2017-12-13T10:15:03","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=19516"},"modified":"2017-12-12T12:51:59","modified_gmt":"2017-12-12T10:51:59","slug":"creating-simple-component-vuejs","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/","title":{"rendered":"Creating Simple Component in Vuejs"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a component for showing the loading message.<\/p>\n<h2>Vuejs Component<\/h2>\n<p>There are two ways to create Vuejs component<\/p>\n<ul>\n<li>Single file component (.vue file) \u2013 this contains the component HTML template, Javascript and CSS in a single <code>.vue<\/code> file. Node based build tools are used to process these files.<\/li>\n<li>Global components using <code>Vue.component<\/code> \u2013 in this we register the component definition as a JSON object using the <code>Vue.component<\/code>.<\/li>\n<\/ul>\n<p>In our example here we will use the latter part because our component is simple and doesn\u2019t warrant a lot of ceremonies.<\/p>\n<h2>Vuejs Component Definition<\/h2>\n<p>For our loading message component, the only value that needs to be passed is the message to be rendered and that will be accepted as an attribute of the component. Let us go ahead and define and register the component using the below code:<\/p>\n<pre class=\"brush:xml\">Vue.component('loading', {\r\n    template: '&lt;div class=\"alert alert-info\"&gt;\\\r\n        &lt;i class=\"fa fa-spinner fa-spin\"&gt;&lt;\/i&gt; {{message}} \\\r\n    &lt;\/div&gt;',\r\n    props: [\"message\"]\r\n});<\/pre>\n<p>In the above code:<\/p>\n<ul>\n<li>We define the component\u2019s HTML using the <code>template<\/code> property. We can put in the HTML there or move the HTML in to a script template and refer that by id, something like:\n<pre class=\"brush:xml\">&lt;script type=\"text\/html\" id=\"loading-template\"&gt;\r\n  &lt;div class=\"alert alert-info\"&gt;\r\n    &lt;i class=\"fa fa-spinner fa-spin\"&gt;&lt;\/i&gt; {{message}}\r\n  &lt;\/div&gt;\r\n&lt;\/script&gt;\r\n\r\n\/\/and in component\r\ntempalte: '#loading-template'<\/pre>\n<\/li>\n<li>The attributes which it accepts are declared using, <code>props<\/code> property. Our component takes only 1 property which is <code>message<\/code><\/li>\n<\/ul>\n<h2>Using the component<\/h2>\n<p>In the places where a loading message needs to be shown, add the following HTML:<\/p>\n<pre class=\"brush:xml\">&lt;loading v-if=\"loadingDetail\" :message=\"'Loading Detail...'\"&gt;&lt;\/loading&gt;<\/pre>\n<p>Isn\u2019t it very simple!!<\/p>\n<h2>Conclusion<\/h2>\n<p>You can find the complete code <a href=\"https:\/\/github.com\/sanaulla123\/samples\/blob\/master\/vuejs-component-demo.html\">here<\/a>. In my next post, I will show you how to create a Bootstrap pagination component. This will involve component state, event handling as well.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Mohamed Sanaulla, partner at our <a href=\"http:\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"https:\/\/sanaulla.info\/2017\/12\/08\/creating-simple-component-in-vuejs\/\" target=\"_blank\" rel=\"noopener\">Creating Simple Component in Vuejs<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a component for showing the loading message. Vuejs Component There are two ways to create Vuejs component Single file component (.vue file) \u2013 this contains the component HTML template, &hellip;<\/p>\n","protected":false},"author":3,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[427],"class_list":["post-19516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-vue-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Simple Component in Vuejs - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Simple Component in Vuejs - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-13T10:15:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mohamed Sanaulla\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mohamed Sanaulla\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\"},\"author\":{\"name\":\"Mohamed Sanaulla\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/25d8251ab46cf28d12fa1ef1d02d22d1\"},\"headline\":\"Creating Simple Component in Vuejs\",\"datePublished\":\"2017-12-13T10:15:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\"},\"wordCount\":304,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Vue.js\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\",\"name\":\"Creating Simple Component in Vuejs - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2017-12-13T10:15:03+00:00\",\"description\":\"Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creating Simple Component in Vuejs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/25d8251ab46cf28d12fa1ef1d02d22d1\",\"name\":\"Mohamed Sanaulla\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/64131fe9e9472b8852abf595cbbf3a8a2a5e86569fa1349eed92b2a32f9104c1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/64131fe9e9472b8852abf595cbbf3a8a2a5e86569fa1349eed92b2a32f9104c1?s=96&d=mm&r=g\",\"caption\":\"Mohamed Sanaulla\"},\"sameAs\":[\"http:\/\/blog.sanaulla.info\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/mohamed-sanaulla\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Simple Component in Vuejs - Web Code Geeks - 2026","description":"Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a","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:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/","og_locale":"en_US","og_type":"article","og_title":"Creating Simple Component in Vuejs - Web Code Geeks - 2026","og_description":"Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-12-13T10:15:03+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Mohamed Sanaulla","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Mohamed Sanaulla","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/"},"author":{"name":"Mohamed Sanaulla","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/25d8251ab46cf28d12fa1ef1d02d22d1"},"headline":"Creating Simple Component in Vuejs","datePublished":"2017-12-13T10:15:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/"},"wordCount":304,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Vue.js"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/","name":"Creating Simple Component in Vuejs - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2017-12-13T10:15:03+00:00","description":"Introduction In this article, we will look at creating a very simple component in Vuejs. Let me pick the example from my previous post and create a","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/creating-simple-component-vuejs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Creating Simple Component in Vuejs"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/25d8251ab46cf28d12fa1ef1d02d22d1","name":"Mohamed Sanaulla","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/64131fe9e9472b8852abf595cbbf3a8a2a5e86569fa1349eed92b2a32f9104c1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/64131fe9e9472b8852abf595cbbf3a8a2a5e86569fa1349eed92b2a32f9104c1?s=96&d=mm&r=g","caption":"Mohamed Sanaulla"},"sameAs":["http:\/\/blog.sanaulla.info"],"url":"https:\/\/www.webcodegeeks.com\/author\/mohamed-sanaulla\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19516"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}