{"id":248,"date":"2019-09-02T07:04:56","date_gmt":"2019-09-02T07:04:56","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=248"},"modified":"2019-10-19T07:19:29","modified_gmt":"2019-10-19T07:19:29","slug":"build-an-app-from-scratch","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/build-an-app-from-scratch\/","title":{"rendered":"Build an App from Scratch"},"content":{"rendered":"\n<p>You can easily build your app from scratch, just follow the steps given below:<\/p>\n\n\n\n<ol><li>Copy the project files from the downloaded <strong>ThemeForest<\/strong> project.<\/li><li>Open terminal and go to the root directory and then run <code>npm install<\/code>.<\/li><li>After installing npm then run <code>npm run serve<\/code>.<\/li><li>Open your browser and access <a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:8080\/\" target=\"_blank\"><code>http:\/\/localhost:8080<\/code><\/a><\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4>Integrate New Widget<\/h4>\n\n\n\n<p>Please follow the <a href=\"https:\/\/docs.theironnetwork.org\/vuely\/adding-new-widgets\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Adding New <\/a><a rel=\"noreferrer noopener\" aria-label=\"Widgets (opens in a new tab)\" href=\"https:\/\/docs.theironnetwork.org\/vuely\/adding-new-widgets\/\" target=\"_blank\">Widgets<\/a> section to learn how to add new widgets in the template.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4>Integrate New Component\/Page<\/h4>\n\n\n\n<h5>For <strong>seed project<\/strong>:<\/h5>\n\n\n\n<p>If you want to add some <strong>pre-made components or pages<\/strong> then follow below steps:<\/p>\n\n\n\n<ol><li>Copy the page template from <code>vuely\/src\/views\/<\/code>downloaded <strong>ThemeForest<\/strong> files and paste it into under the <code>your-app-directory\/src\/view\/<\/code> directory.<\/li><li>Now you need to define the route in the <code>your-app-directory\/src\/router\/default.js<\/code> file.\n<pre class=\"py-4\">\/\/ layout component\nimport Full from '..\/container\/Full'\n\n\/\/ dashboard components \nconst DashboardOne = () =&gt; import('..\/views\/dashboard\/DashboardOne');\n\nexport default [ \n   { \n      path: '\/', \n      component: Full, \n      redirect: '\/default\/dashboard\/dashboard-v1', \n      children: [ \n         { \n            path:'\/default\/dashboard\/dashboard-v1', \n            component: DashboardOne, \n            meta: { \n               title: 'message.dashboardv1',\n               breadcrumb: 'Dashboard \/ DashboardV1' \n            } \n         }\n      ]\n   }\n]\n<\/pre>\n<\/li><li>That\u2019s it if you navigate http:\/\/localhost:8080\/dashboard\/dashboard-v1\/ The page has been build successfully.<\/li><\/ol>\n\n\n\n<p>If you want to <strong>add some new components<\/strong> by your own, then follow the steps mentioned below:<\/p>\n\n\n\n<p>Please check this <a href=\"https:\/\/docs.theironnetwork.org\/vuely\/adding-new-component\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Adding New Component<\/a> section to get detailed information on this.<\/p>\n\n\n\n<h5 id=\"for-complete-template\">For complete template:<a href=\"#for-complete-template\"><\/a><\/h5>\n\n\n\n<p>If you are using the complete template then you are able to add only new components or pages &amp; for that  you have to follow the below mentioned steps:<\/p>\n\n\n\n<p>Please check this <a href=\"https:\/\/docs.theironnetwork.org\/vuely\/adding-new-component\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Adding New Component<\/a> section to get detailed information on this.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"integrating-menu\">Integrating Menu<a href=\"#integrating-menu\"><\/a><\/h4>\n\n\n\n<p>If you want to add menu items then please check this section <a href=\"https:\/\/docs.theironnetwork.org\/vuely\/adding-menu-in-different-layouts\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Adding Menu In Different Layouts<\/a> for the detailed information.<\/p>\n<div class=\"pld-like-dislike-wrap pld-template-1\">\n    <div class=\"pld-like-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-like-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"248\" data-trigger-type=\"like\" data-restriction=\"cookie\" data-ip-check=\"0\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-up\"><\/i>\n                    <\/a>\n    <span class=\"pld-like-count-wrap pld-count-wrap\">    <\/span>\n<\/div><div class=\"pld-dislike-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-dislike-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"248\" data-trigger-type=\"dislike\" data-ip-check=\"0\" data-restriction=\"cookie\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-down\"><\/i>\n                    <\/a>\n    <span class=\"pld-dislike-count-wrap pld-count-wrap\"><\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>You can easily build your app from scratch, just follow the steps given below: Copy the project files from the downloaded ThemeForest project. Open terminal and go to the root directory and then run npm install. After installing npm then run npm run serve. Open your browser and access http:\/\/localhost:8080 Integrate New Widget Please follow [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/248"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":14,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/248\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/248\/revisions\/770"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}