{"id":175,"date":"2019-09-02T05:19:33","date_gmt":"2019-09-02T05:19:33","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=175"},"modified":"2019-10-19T07:02:02","modified_gmt":"2019-10-19T07:02:02","slug":"adding-new-component","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/adding-new-component\/","title":{"rendered":"Adding New Component"},"content":{"rendered":"\n

We will help you in creating a new component. Follow the steps below to add a new component(example: test component):<\/p>\n\n\n\n

Step 1: <\/strong>Create a new folder in src->views<\/code> . Ex: As we have created a test folder inside src->views<\/code> folder.<\/p>\n\n\n\n

\"\"
Test Folder Created<\/figcaption><\/figure><\/div>\n\n\n\n

Step 2: <\/strong>In test folder, create a file named with the FolderName.vue. Ex: test.vue.<\/p>\n\n\n\n

\"\"
Created Vue File<\/figcaption><\/figure><\/div>\n\n\n\n

Step 3: <\/strong>Place the given code inside the file you have created in the above step. Ex: In test.vue file.<\/p>\n\n\n\n

<template>
  <div>
    <page-title-bar><\/page-title-bar>
    <h1>Test is Working<\/h1>
  <\/div>
<\/template><\/pre>\n\n\n\n
Step 4: <\/strong>We have to link the newly created component in the menu. Go to src->store->modules->sidebar->data.js<\/code> file. When you open the file, you will see the code structure like this:<\/p>\n\n\n\n
\/\/ Sidebar Routers
 export const menus = {
     'message.general': [
         {
             action: 'zmdi-view-dashboard',
             title: 'message.dashboard',
             active: true,
             items: [
                 { title: 'message.ecommerce', path: '\/default\/dashboard\/ecommerce', exact: true },
                 { title: 'message.webAnalytics', path: '\/mini\/dashboard\/web-analytics', exact: true },
                 { title: 'message.magazine', path: '\/horizontal\/dashboard\/magazine', exact: true },
                 { title: 'message.news', path: '\/boxed-v2\/dashboard\/news', exact: true },
                 { title: 'message.agency', path: '\/boxed\/dashboard\/agency', exact: true },
                 { title: 'message.saas', path: '\/horizontal\/dashboard\/saas', exact: true }
             ]
         }
     ]
     \u2026
 }<\/pre>\n\n\n\n
Add the link for newly created component in the menus object. Now your file will looks like this:<\/p>\n\n\n\n
\/\/ Sidebar Routers
 export const menus = {
     'message.general': [
         {
             action: 'zmdi-view-dashboard',
             title: 'message.dashboard',
             active: true,
             items: [
                 { title: 'message.ecommerce', path: '\/default\/dashboard\/ecommerce', exact: true },
                 { title: 'message.webAnalytics', path: '\/mini\/dashboard\/web-analytics', exact: true },
                 { title: 'message.magazine', path: '\/horizontal\/dashboard\/magazine', exact: true },
                 { title: 'message.news', path: '\/boxed-v2\/dashboard\/news', exact: true },
                 { title: 'message.agency', path: '\/boxed\/dashboard\/agency', exact: true },
                 { title: 'message.saas', path: '\/horizontal\/dashboard\/saas', exact: true }
             ]
         }
     ],
     \/\/ This is the new object you have to create for your new component.
     'message.testpages': [
         {
             action: 'zmdi-view-dashboard',
             title: 'message.test',
             active: false,
             items: [
                 { title: 'message.test', path: '\/test'},
             ]
         }
     ]
 }<\/pre>\n\n\n\n
The description of the keys used in the code are:<\/p>\n\n\n\n
  1. action is icon<\/li>
  2. title is page title<\/li>
  3. active is state(true in dashboard case only, false in this case)<\/li>
  4. items is an array of sub menu(if there is no sub menu then set it to null)<\/li><\/ol>\n\n\n\n
    There are few things you need to take care about:<\/h6>\n\n\n\n
    1. State is always set to false in new components, It is true in dashboard case only.<\/li>
    2. If there exists some sub menu items then pass it in the form of array to items. Make Sure the items of new component only contains title & path, not the exact key.<\/li>
    3. If there is no sub menu, then the value of items key is set to null items: null<\/code>.<\/li>
    4. If items is null then you have to pass the path in the main object like below: 
       { \n     action: 'zmdi-view-dashboard', \n     title: 'message.test', \n     active: false, \n     items: null, \n     path: '\/test', \n} <\/pre><\/li><\/ol>\n\n\n\n
      Step 5: <\/strong>Add the route for the newly created component. Follow the given instructions to add the route. Open the src->router->default.js<\/code> file. Import the test component like below to use it in the rest of the file:<\/p>\n\n\n\n
      const test = () => import('Views\/test\/test');<\/pre>\n\n\n\n
      Now add the component in the children array:<\/p>\n\n\n\n
      export default {
         path: '\/',
         component: Full,
         redirect: '\/default\/dashboard\/ecommerce',
         children: [
            ...
            {
               component: test,
               path: '\/default\/test',
               meta: {
                  requiresAuth: true,
                  title: 'message.test',
                  breadcrumb: 'Test'
               }
            }
         ]
      }<\/pre>\n\n\n\n
      If you choose a different layout for your template, then you have to follow the above mentioned step for that particular layout also. Make sure to add the path accordingly.<\/p><\/blockquote>\n\n\n\n
      Now save the file and open the browser, you will see your added component in the template like below:<\/p>\n\n\n\n
      \"\"
      Added Component<\/figcaption><\/figure>\n\n\n\n
      Don’t panic about the strings like message.testpages or message.test. We need to create these strings in the index.js<\/code> file in the src->lang->en<\/code> folder like below:<\/p>\n\n\n\n
      export default {
        -------
        -------
        test: \"Test\",
        testpages:\"My Page\"
      }<\/pre>\n\n\n\n
      Save this file and open the browser, your strings would be replaced by the message you have provided in the index.js<\/code> file.<\/p>\n\n\n\n
      Make sure if you are using any other language in the template then you will define the strings in that language folder also.<\/p><\/blockquote>\n\n\n\n
      Now, You have successfully created a new component(named: test) in the template.<\/p>\n
      \n    
      \n    \n                        <\/i>\n                    <\/a>\n    2    <\/span>\n<\/div>
      \n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
      We will help you in creating a new component. Follow the steps below to add a new component(example: test component): Step 1: Create a new folder in src->views . Ex: As we have created a test folder inside src->views folder. Step 2: In test folder, create a file named with the FolderName.vue. Ex: test.vue. Step […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/175"}],"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=175"}],"version-history":[{"count":10,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":710,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/175\/revisions\/710"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}