SocialVDocs

Basic Installation

Steps to be followed for getting started with the template:

There are followings basics packages you should install before going further.

1. Open terminal or CMD and go the root directory of the template
2. Run in terminal or CMD: npm install
3. To Run project on Local environment run: npm run serve
4. Then visit: http://localhost:8080

Development to production

Here is the steps of production:

1. If you can deploy in subdirectory first you can copy and rename the following file .env.example to .env and set the production path by VUE_BASE_URL="" this key
2. To Deploy project on server create production build by running: npm run build
3. This will generate /dist folder in project root directory you'll have to upload these file using a FTP on your server
4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Folder Structure

Here is the general structure of the template:

socialV-vue
| - public
   | - img
     - favicon.ico
     - index.html

| - src
  | - assets
    | - css
    | - fonts
    | - images
    | - js
    | - scss

    | - components
        | - socialvue

    | - config
        | - socialvue

    | - FackApi
        | - socialvue

    | - layouts
        | - AuthLayouts
            | - AuthLayouts1.vue
          - BlankLayout.vue
          - Layout1.vue

    | - plugins
        | - bootstrap-vue.js
    | - router
    | - store
    | - views
      - App.vue
      - main.js
      - registerServiceWorker.js
  - .browserslistrc
  - .editorconfig
  - .eslintrc.js
  - .eslintignore.js
  - .gitignore
  - babel.config.js
  - .env.example
  - package.json
  - README.md
  - vue.config.js
                                

SocialV custom components structure

Here is the general structure of the SocialV custom components:

<!-- SocialV components -->

| - components
    | - socialvue
        | - breadcrumbs
            - BreadCrumbStyle1.vue
        | - calendar
            - FullCalendar.vue
        | - cards
            | - iq-card.vue
        | - chart
            | - AmChart.vue
            | - ApexChart.vue
            | - HighChart.vue
            | - MapAmChart.vue
            | - MorrisChart.vue
        | - footer
            | - FooterStyle1.vue
        | - lottie
            | - Lottie.vue
        | - menus
            | - ListStyle1.vue
        | - navbars
            | - NavBarStyle1.vue
        | - rightsidebar
            | - RightSideBarStyle1.vue
        | - sidebar
            | - SideBarStyle1.vue
        | - slider
            | - Slick.vue
        | - tab
            | - tab-nav.vue
            | - tab-nav-item.vue
            | - tab-content.vue
            | - tab-content-item.vue
       | - timeline
            | - TimeLine.vue
        | - loader
            | - Loader.vue
                                

For Favicon icon

Set favicon for replace favicon.ico and restart server

For Logo

Use the header style which is in components -> soicalvue -> Partials -> Header. Replace "logo.png" with your own logo image URL.

| - Socialv-vue
    | - layouts
        | - Layout1.vue

<SideBarStyle1 :items="sidebar" :logo="logo"></SideBarStyle1>
<NavBarStyle1 title="Dashboard" :homeURL="{ name: 'dashboard1.home' }" :logo="logo"></NavBarStyle1>
<script>
  import SideBarItems from '../FackApi/json/SideBar'
  import logoImg from '../assets/images/logo.png'
    data () {
        return {
          sidebar: SideBarItems,
          userProfile: profile,
          logo: logo
        }
      }
</script>

Here is the layout and routing configure

 | - layouts
    | - AuthLayouts
        | - AuthLayouts1.vue
      - BlankLayout.vue
      - Layout1.vue
| - router
    | - index.js<
                                

Router url configure

// Set Layout in this route
const routes = [
  {
    path: '/pages',
    name: 'pages',
    component: Default,
    children: pagesChildRoutes('default')
  }
]

// Set View in this function
const pagesChildRoutes = (prop) => [
  {
    path: 'maintenance',
    name: prop + '.maintenance',
    component: Maintenance
  }
]
                                

Custom Card

We have build different types of custom card components. And these are the some prop and slots

<iq-card body-class="border text-center" class="bg-primary text-white">
 <template v-slot:headerTitle>
      <h4>Card Title</h4>
  </template>
  <template v-slot:body>
    <p >lorium ipsum</b-button>
  </template>
  <template v-slot:footer>
    <b-button variant="danger">Button</b-button>
  </template>
</iq-card>
                                    

Prop

Prop is set the attriblute for the component.

Slots

Slot is set of the content between opening and closing tag.

Tab

We have build custom tab components. And these are the some prop and slots

 
<tab-nav :tabs="true" id="myTab-1">
  <tab-nav-items :active="true" id="home-tab" ariaControls="home" role="tab" :ariaSelected="true" title="Home" />
  <tab-nav-items :active="false" id="profile-tab" ariaControls="profile" role="tab" :ariaSelected="false" title="Profile" />
  <tab-nav-items :active="false" id="contact-tab" ariaControls="contact" role="tab" :ariaSelected="false" title="Contact" />
</tab-nav>
<tab-content id="myTabContent">
  <tab-content-item :active="true" id="home" aria-labelled-by="home-tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </tab-content-item>
  <tab-content-item :active="false" id="profile" aria-labelled-by="profile-tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </tab-content-item>
  <tab-content-item :active="false" id="contact" aria-labelled-by="contact-tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </tab-content-item>
</tab-content>
                                            

Tab Nav

Tab Item

Tab Content

Tab Content Item

TimeLine

timelineItems: [
    {
      color: 'danger',
      title: 'Dev Meetup',
      right: '20 November 2019',
      description: 'Bonbon macaroon jelly <a href="">beans gummi</a> bears jelly lollipop apple',
      child: {
        type: 'img',
        items: [
          require('../../assets/images/user/05.jpg'),
          require('../../assets/images/user/06.jpg'),
          require('../../assets/images/user/07.jpg'),
          require('../../assets/images/user/08.jpg'),
          require('../../assets/images/user/09.jpg'),
          require('../../assets/images/user/10.jpg')
        ]
      }
    }
  ]

<TimeLine :items="timelineItems" />
                                            

Silder

<Slick>
  <div>
    <a href="javascript:void(0)" class="iq-booking-date">
      <div class="iq-booking-dot"></div>
        <h3>Slider Item</h3>
    </a>
  </div>
</Slick>
                                            

Lottie

<lottie :option="require('../../assets/images/small/data')"></lottie>
                                            

Bootstrap has wonderfull documentation on the following components::

• Row Alignments
• Alerts
• Badges
• Carousel
• Columns
• Tables
• Buttons

Vue Bootstrap for extra component https://bootstrap-vue.js.org/docs/components

Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

Version 1.0

- Initial Release

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

• bigstockphoto bigstockphoto
• Pexels Pexels
• freepik freepik
• pixabay pixabay

Plugins

• Vue JS
• Vue Bootstrap
• Parallax
• Jquery
• Jquery appear
• Countdown
• Full Calendar
• AmChart
• Page Scroll Progress
• Mapbox Gl vue
• Vue Slick Slider
• Lottie

CSS & Fonts

• Bootstrap Vue
• Font Awesome
• ionicons
• remixicon
• Google Fonts