Documentation

Iteck - Vue   Creative & Modern Multi Purpose template

Iteck is a Vue and Nuxtjs creative & modern multi purpose template is a perfect template for modeling business startups, IT services and digital agencies . Multiple templates are included in this template with lots of CSS and Vue animations. All files has been well organized and nicely commented for easy to customize.


  • Created: 4 Nov, 2022
  • Update: 01 Feb, 2023

If you have any questions that are beyond the scope of this help file, Please feel free to contact us via ThemesCamp.


Features

  • Build on VueJS (No jQuery)
  • Build on Nuxt.js
  • Based on Bootstrap 5
  • Based On SCSS
  • Ready Homepages
  • SEO Friendly
  • Easy to Customize
  • 100% Fully Responsive
  • Minimal and Clean
  • Awesome Unique Look
  • 24/7 Support
  • W3C Validated Code
  • All files are well commented
  • Professional Support and free updates
  • Support all modern browsers and devices

Files Include

iteck_vue Folder

Folder contains main template code & all vue, json, scss, css, images, fonts, js files

iteck-vue-docs Folder

Documentation folder of "iteck vue" written in html css


Installation

Follow the steps below to setup your template:

  1. Download the latest theme source code from the Marketplace.
  2. Download and install Node.js and npm from Nodejs. The suggested version to install is LTS.
  3. Open terminal in iteck_nuxtjs template folder.
                      > cd /iteck_nuxtjs/
                    
  4. Install npm packages. You must have to install packages of your project to install all the necessary dependencies, You can do this by running the following command.
                      > npm install
                    

Run Development Server

Start your app development server to change, update and customize your app.

Run npm run dev in the terminal from the root of your project to start a dev server

              > npm run dev
            

Navigate to http://localhost:3000 to see your app, the app will automatically reload if you change any of the source files.

Build For Production

Build the app for production and make it ready for deployment (used for dynamic & ssr support hosting)

Run npm run build to build and optimize your application with webpack for production.

              > npm run build
            

The build artifacts will be stored in the /.nuxt/ directory.

Run npm start to run the production build of the project locally.

Export To HTML

Build the application, and generate every route as a HTML file (used for static hosting)

Run npm run generate to export your application

              > npm run generate
            

The generated HTML files will statically be exported to dist directory.

Run npm start to serve the dist directory like your static hosting would do (Netlify, Vercel, etc), great for testing before deploying.


Deployment

You can deploy your project to any static hosting or a hosting that supports Node.js
We suggest some hosting you can consider to use:

  • github logo
  • vercel logo
  • Netlify logo
  • aws logo

Folder Structure

Iteck comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.

Root Folder

[root_folder] folder contains the whole project folders & files

Root Folder Content:

File/Folder Description
common Folder contains common helper functions.
components Folder contains template components that imported and used in pages
data Folder contains static app data in json format.
layouts Nuxt.js layouts folder contains all template layouts.
node_modules A directory created by npm and a way of tracking each packages you install locally via package.json
pages Nuxt.js page folder contains all template pages files.
plugins Nuxt.js plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application
static Nuxt.js static folder that can serve static files which files inside it can then be referenced by your code starting from the base URL "/", like images, fonts and vendors.
styles Folder contains all global app css and scss styles.
nuxt.config.js A regular node.js module, not a JSON file. It gets used by the Nuxt.js server for custom advanced configuration of Nuxt.js and build phases, and it's not included in the browser build
package.json Includes the list of dependencies to install from npm

Layouts Folder

/iteck_vue/layouts folder contains all template layouts.

File Description
Preview.vue Vue component represents the Preview layout for main Landing Preview page
Main.vue Vue component represents the Main layout for most of the project pages
RTL.vue Vue component represents the layout for RTL pages

Pages Folder

/iteck_vue/pages folder contains template pages files.

Folders content:

  • /home-app-landing
  • index.vue
  • /home-saas-technology
  • index.vue
  • /home-marketing-startup
  • index.vue
  • ...

Each file is a Vue component exported from a .vue file in the pages directory is associated with a route based on its containing folder name.

Components Folder

/iteck_vue/components folder contains template components that imported and used in pages.

Components folders are grouped together according to the pages with same style.
e.g. App Folder contains all the components of App pages

  • /App
  • Header.vue //= App Header Component
  • Services.vue //= App Services Component
  • ...
  • /Saas
  • Header.vue //= Saas Header Component
  • Services.vue //= Saas Services Component
  • ...
  • ...

Each folder contains a vue components that is imported and rendered in some pages component.

Data Folder

/iteck_vue/data folder contains static app data in json format.

Each folder contains a page components data stored in JSON format.

  • /App
  • header.json //= App Header Component Data
  • services.json //= App Services Component Data
  • ...
  • /Saas
  • header.json //= Saas Header Component Data
  • services.json //= Saas Services Component Data
  • ...
  • ...

Each file contains JSON data that imported and rendered on it's component.

Common Folder

/iteck_vue/common folder contains common helper functions.

Each file is JavaScript function that is commonly used in project components.

Plugins Folder

/iteck_vue/plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.

This is the place to add Vue plugins and to inject functions or constants. Every time you need to use Vue.use(), you should create a file in plugins/ and add its path to plugins in nuxt.config.js


Code Structure

Main template components code structure

Layout

/iteck_vue/layouts/[layout].vue Vue component that contains app layout.

// ./layouts/Main.vue
<template>
  <div>
    <PreLoader />
    <Nuxt />
    <ScrollToTop :topText="scrollTopText" />
  </div>
</template>

<script>
import fixStylesheetsOrder from "../common/fixStylesheetsOrder";
import PreLoader from "../components/PreLoader/index.vue";
import ScrollToTop from "../components/ScrollToTop/index.vue";

export default {
  components: {
    PreLoader,
    ScrollToTop
  },
  head() {
    return {
      link: [
        { rel: 'stylesheet', href:'/assets/css/lib/bootstrap-icons.css' },
        { rel: 'stylesheet', href:'/assets/css/lib/swiper.min.css' },
        { rel: 'stylesheet', href:'/assets/css/lib/bootstrap.min.css' },
        { rel: 'stylesheet', href:'/assets/css/lib/all.min.css' },
        { rel: 'stylesheet', href:'/assets/css/lib/animate.css' },
        { rel: 'stylesheet', href:'/assets/css/style.css' }
      ]
    }
  },
  mounted() {
    fixStylesheetsOrder(false);
  }
}
</script>

            

Layout component wraps pages content and contains specific configurations such as common components, css or scripts.

Page

/iteck_vue/pages/[page_folder]/[page].vue Vue component that contains a page code.

// ./pages/index.vue
// Page HTML Template
<template>
  <div>
    <Header />
    <Features />
    <Demos />
    <InnerPages />
    <BuyNow />
    <Portfolio />
    <Codei />
    <BestFeatures />
    <Responsive />
    <AllFeatures />
    <Testimonials />
    <CallToAction />
  </div>
</template>

<script>>
import Header from '../components/Preview/Header';
import Features from '../components/Preview/Features';
import Demos from '../components/Preview/Demos';
import InnerPages from '../components/Preview/InnerPages';
import BuyNow from '../components/Preview/BuyNow';
import Portfolio from '../components/Preview/Portfolio';
import Codei from '../components/Preview/Codei';
import BestFeatures from '../components/Preview/BestFeatures';
import Responsive from '../components/Preview/Responsive';
import AllFeatures from '../components/Preview/AllFeatures';
import Testimonials from '../components/Preview/Testimonials';
import CallToAction from '../components/Preview/CallToAction';

export default {
  name: 'LandingPreview',
  layout: "Preview",
  components: {
    Header,
    Features,
    Demos,
    InnerPages,
    BuyNow,
    Portfolio,
    Codei,
    BestFeatures,
    Responsive,
    AllFeatures,
    Testimonials,
    CallToAction,
  },
  head() {
    return {
      titleTemplate: "%s - Preview"
    }
  },
  mounted() {
    document.body.classList.add('index-main');
  }
}
</script>

            

Component

/iteck_vue/components/[component_folder]/[component].vue Vue component contains part of a page code.

// ./components/Navbars/TopNav.vue
<template>
  <div :class="`top-navbar style-${styleType}`">
    <div class="container">
      <div class="content text-white">
        <span class="btn sm-butn bg-white py-0 px-2 me-2 fs-10px">
          <small class="fs-10px">{{rtl ? 'عرض خاص':'Special'}}</small>
        </span>
        <img src="/assets/img/icons/nav_icon/imoj_heart.png" alt="" class="icon-15 me-1" />
        <span class="fs-10px op-6 me-1">{{ rtl ? 'احصل على' : 'Get' }} </span>
        <small class="op-10 fs-10px">{{ rtl ? '20% خصم' : '20% Discount' }}</small>
        <span class="fs-10px op-6 mx-1">{{ rtl ? 'عند الاشتراك' : 'Get for New Account' }}</span>
        <NuxtLink to="/page-contact-5" class="fs-10px text-decoration-underline ms-2">
          {{ rtl ? 'اشترك الأن' : 'Register Now' }}
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["styleType", "rtl"]
}
</script>

            

Data

/iteck_vue/data/[data_folder]/[data_file].json JSON file stores component data.

// ./src/data/Blog/slides.json
[
  {
    "image": "assets/img/blog/s_blog.png",
    "type": "News",
    "time": "3 Days ago",
    "title": "Solutions For Big Data Issue, Expert Perspective",
    "desc": "If there’s one way that wireless technology has changed the way we work, it’s that will everyone is now connected"
  },
  .
  .
]

            

Plugin

/iteck_vue/plugins/[plugin_file].js Vue.js plugin file.

// ./plugins/vueAwesomeSwiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

            

Source & Credits

Images:

Images are only for demo purpose and not included with the download bundle.

Fonts:

Scripts:


iteck-logo

Thank you for purchased Iteck template

We truly appreciate and really hope that you'll enjoy our template!

If you like our template, plase rate us 5 star !