Introduction

Welcome to Multikart Vue!

We are pleased that you have chosen MULTIKART Vue theme for your site and we will not disappoint you with your choice. MultiKart is an excellent theme develop with a concise approach. The code written is a clean and well structured.

MultiKart is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

MultiKart theme template is build focusing on HTML and SCSS and works perfectly fine in all the browsers and it's No jQuery!

Multikart theme include 16 Home page layouts, 35+ inner pages, 10+ product pages, and 9+ shop pages.

We request to have a look at our MultiKart manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

Getting started

Welcome to Vue! Vue helps you build modern applications for the web, mobile, or desktop.

For getting started an Vue application you needs two things as Prerequisites.

Prerequisites

Before you begin, make sure your development environment includes Node and an npm package manager.

Node.js

Download latest version of node.js from nodejs.org.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
  • Npm package manager

    Vue CLI, and Vue apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

    For better understanding Vue we suggest you to once go through official documentation of Vue from Vuejs.org

    Vue setup

    Installing Vue CLI

    You use the Vue CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.

    Install the Vue CLI globally.

    To install the CLI using npm, open a terminal/console window and enter the following command:

    npm install -g @vue/cli 
                          

    For Nuxt.js use:

    npm i npx 
                          
    Create Initial application
  • 1 . Run the CLI command npx create-nuxt-app and provide the name my-project, as shown here:
  • npx create-nuxt-app  
                          
  • 2. The vue create command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
  • Serve Application
  • 1. Go to the workspace folder (my-project).
  • cd my-project
                          
  • 2. Launch the server by using the CLI command npm run serve
  •  npm run dev
                          
    Build Application
  • 1. Build you application for host on server using below command:
  •  npm run build
                          
  • 2. It will create one dist file in your theme folder. Make zip of dist folder. so here you are ready to upload your theme on server.
  • If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder by pastng below code
  •  
      Options -MultiViews
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^ index.html [QSA,L]
                            
                            
  • Now upload your dist folder on public folder
  • Making Sub-folder on Server
  • By default it host on your server root, If you wish to upload on sub-folder then:
  • 1. Go to your theme and open nuxt.config.js and add your subfolder name here:
  •  
      export default = {
        mode: 'spa',
        subdirectory: '/multikart/'
      };
                            
                            

    SPA stands for single page application

    universal used for server side rendering(SSR), if you want SSR than go to nuxt.config.js and change mode to 'universal'

  • 2. open route >> nuxt.config.js in object of router replace base attribute with
  •  
      router: {
        base: '/multikart/'
      }
                              
                              
  • Now again build theme using
  •  npm run build
                            
  • Now create a .htaccess file in your subfolder folder by pastng below code
  •  
      Options -MultiViews
      RewriteEngine On
      RewriteBase /multikart/
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^ index.html [QSA,L]
                              
                              
  • Now upload your dist folder in sub folder

  • Multikart setup

    If you have already download and install node.js and Vue CLI then ignore prerequisites accordingly.

    Prerequisites
    Node.js

    Download latest version of node.js from nodejs.org.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
  • Vue CLI

    Install Vue CLI Using:

    npm install -g @vue/cli 
                            

    For Nuxt.js use:

    npm i npx 
                          
    Setup Multikart theme by
    • 1) Download and extract multikart theme from themeforest
    • 2) Extract it and then go in to theme folder.
    • cd theme
                            
    • 3) Import all dependency by installing npm command
    • npm install
                            
    • 4) Now you are in stage to successfully run multikart using below command:
    • npm run dev
                            

    Theme Features

    • Responsive Design   :   Looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
    • RTL Supported   :   All inner pages of Multikart are RTL supported.
    • Made with Sass   :   Multikart is made with sass.
    • Customizer   :   Customize your dream theme by manuplutaing single config file.
    • Vue Bootstrap 2.1.0   :   Multikart made by Vue boostrap latest version.
    • Google Font   :   You can use unlimited Google fonts.
    • Firebase   :   Integration of firebase for checking authentication.
    • Advance Lookbook   :   This theme allows you to put your own Lookbook on Homepage or a Lookbook Page.
    • Amazing Mega-menu   :   A completely different mega-menu with powerfully functionality and flexible layout.
    • Product Hover Variation   :   This theme has 8+ product hover variations
    • vue-awesome-swiper   :   We have use for all sliders.
    • vue2-filters   :   We have use it for filters like currency and orderby.
    • Pagination   :   First 12 product display on shop page after than product show by paginate.
    • Add to Cart   :  When click on add to cart button, product added in cart page and also display on header cart .
    • Quick-view   :   Every product has Quick view modal popup.
    • Wishlist   :   Click on wishlist button, product added in wishlist.
    • Product Compare   :   Click on Compare button product added in compare list , maximum 4 product allow to add.
    • Product Details   :  Every Product have individual details page and 10+ different product pages, and you can any use details page.
    • One Page Checkout   :  In product details page added buy now it's re-direct checkout page with selected product.
    • Shop Page   :  We have added 9+ different shop pages, and you can any use shop page.
    • Filter   :  Various Different type of custom filter (tags, color, size, category. price) it's customizable, you can customize by your logic.
    • Payment Method   :  We have added two payment method paypal and stripe.js for checkout.
    • Blog Page   :  There three different blog variation pages.
    • Inner Page   :  Multikart theme include 35+ inner pages.
    • Multi-Browser Support   :   Multikart has multi browser support.

    Folder Structured

    Here we represent Vue Folder Structure and Style Customize

    • Multikart Vue
      • nuxt
      • assets
        • css
        • fonts
        • images
        • scss
      • components
        • commonFiles.vue
      • data
        • alljson files
      • layouts
        • default.vue
      • middleware
      • node_modules
      • pages
        • index.vue
      • plugins
        • plugin.js
      • static
      • store
        • modules
        • index.js
      • .eslintrc.js
      • nuxt.config.js
      • package-lock.json
      • package.json

    Theme Customize

    Layouts

    We have provided a bunch of demo layouts and header layouts that can be implemented with just a options change to body!

    For creating your dream layout open customizer by click on setting icon

    img1

    You can change your layout version i.e. RTL and LTR by click on :

    img1

    Also you can change your color option by click on:

    img3

    Then you just need to click on configuration button

    img3

    Configuration popup will be open then just copy config which is in popup model

    img4

    Now go to our theme >> data >> config.json and then just replace complete config.json with your new configuration and re-run theme using npm run serve.

    img4

    Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.

    Layout Options
    RTL Layout Class:
    rtl
    Dark body class:
    dark

    Customize Demo

    Suppose you want to take only a single demo then you need to follow below steps (for example, you want only kids demo)

    • Now, remove all others demo except kids demo from pages >> shop >> remove all other demo folder except kids folder.
    • Accordingly, you can select header, footer, product-box and cart-popup as per your choice from components and remove others.for more refer component section
    • Also if you wish diffrent product page, collection page as well as blog page then refer pages components and import accordingly in your demo.

    Components

    Header:

    Remove all other headers from components >> header except your choice header and import that header in your demo index.vue file.

    img1
    Footer:

    Remove all other Footers from components >> footer except your choice footer and import that footer in your demo index.vue file.

    img1
    Product-box:

    Remove all other product-box from components >> product-box except your choice product-box and import that product-box in your demo index.vue file.

    img1
    Product-box:

    Remove all other cart-popup from components >> cart-model except your choice cart-model and import that cart-model in your demo index.vue file.

    img1

    Firebase

    Basically Firebase use for:
  • Email and password authentication with Firebase,
  • Social authentication with Facebook and Google, Twitter etc..
  • Manage Complete Database on Cloud
  • Hosting
  • Password recovery,
  • Verification emails,
  • Storing and accessing the authentication state using the browser's localStorage
  • There are also many other use of firebase that you can find from reference which we have attach below.

    Prerequisites

    You must have the following prerequisites:

  • Recent versions of Node.js and NPM. You can install them from their official website,
  • Vue Cli installed (npm install -g @vue/cli)
  • Let's follow below step to secure your application
    • Step 1:
      • 1.setup firebase project in firebase console.

        click on Get Started button

      • 2. Add new project

        create new project

        Accept the controler-terms and click on Create Project

      • 3. Go to Develop > Authentication

      • 4. Get config object for your web app

        To get the config object for a Firebase Web App:

        >> Click the Settings icon, then select Project settings.

        >> Go to the web app

        >> In Your apps card, select the nickname of the app for which you need a config object.

        >> Select Config from the Firebase SDK snippet pane.

        >> Copy the config object snippet, then add it to your app's HTML.

        copy config add on config.txt

      • 5.Next, you'll need to enable Email authentication from the authentication > Sign-in method tab:

      • 6.go to sign in method

        Make disble toggle to enable, and save changes

      • 7.Go to the authentication > Users tab then click on the Add user button and genarate email and password:

    • Step 2:
      Installing Firebase in Vue
      •                                       npm install ——save firebase
                                         
                                          
      • 2. Go to plugins >> plugin.js file and import firebase and in config object you can just paste your firebase credential for your app.

      • 3. Generate components called Login-firebase and use firebase in Login component according to your needs.

    How to remove the firebase from multikart theme
    • 1. Remove Import statement and configuration of firebase from your plugins >> plugin.js

    • 2. Remove login-firebase.vue from pages >> page >> account >> login-firebase and use simple login.vue. Also remove auth folder from pages >> page >> account >> auth

    • 3. Also Remove Logout and corrosponding import from components >> widgets >> topbar.vue

    Dependencies

    • Vue-Bootstrap : Doc: https://bootstrap-vue.js.org/docs
    • Awesome Swiper (Carousel) : Doc: https://www.npmjs.com/package/vue-awesome-swiper
    • PayPal : Doc: https://www.npmjs.com/package/vue-paypal-checkout
    • Gallery : Doc: https://www.npmjs.com/package/vue-image-lightbox
    • Firebase : Doc: https://vuejs.org/v2/examples/firebase.html
    • Masonary : Doc: https://www.npmjs.com/package/vue-masonry
    • Filters : Doc: https://www.npmjs.com/package/vue2-filters

    Thank You

    Basically Our team will support in
  • Answering your questions, problems regarding theme with best to solving before 24 working hours,once you generate a ticket.
  • Solution of Reported Bug
  • Update you with latest version of theme
  • Apart from that, if you needs any extra / customization work then also you can get in touch with our experts by raising ticket to help you in customize with affordable extra budget.

    Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

    Best Regards

    Pixelstrap

    Hand crafted & made with