Educax DOC

Getting Started

Welcome to Educax ! Thanks for purchasing our template.

It is our great pleasure that you purchased our template. We would like to extend our heartfelt thanks to you.

Our Educax Template has well-organized, easily understandable files structure, supports superfast data processing, works pretty well on different kinds of browsers, including Chrome, IE, Edge, Firefox, Safari, and so on. On top of those, it provides 3 demo and fashionable design, fully customizable components.

Before using this template, be sure to check this doc carefully. By collecting various opinions of customers, we’ve made such a nice document to give you clear understanding of the template.

If you can not find answers in documentation or have opinions to develop this Educax Template, feel free to contact us support@thetork.com, and we will always be with you and will appreciate your kindness.

Features

Nuxt 3

Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications.
For more info: https://nuxt.com/

Pinia

Pinia started as an experiment to redesign what a Store for Vue could look like with the Composition API around November 2019. It is a store library for Vue, it allows you to share a state across components/pages.
For more info: https://pinia.vuejs.org/

Skeleton

Educax installed skeleton to prevent showing empty screen before content loaded. You can it in most pages, specially product and post related pages.

JSON Server

We used JSON server. Agile combination of JSON and nuxt 3 took Educax to the top score. you could change server data and do whatever you want.

Made with sass

This template is made with sass. Every components and pages are add spectated scss file that why it's very easily customize and use.

Amazing Performance

Such great performace will help you build attractive & fast-speed sites. You will be amazed at high performance as you can test with lighthouse.

SEO Friendly

SEO Friendly is one of our top priorities while working on Porto improvements, you can expect high seo performance while using Porto.

Responsive Design

Looks great on desktops, laptops, tablets and mobiles.

Multi-Browser Support

You don't need to worry about browser you use. Educax's been made for multi-browser and tested.

Files Structure

Well-organized and easily understandalble structure

Educax Template has well-organized, easily understandable and customizable files structure. Once you see it, you will understand at first glance.

                            /// root folder
                            📦Educax
                            ┣ 📂assets
                            ┃ ┣ 📂css
                            ┃ ┣ 📂scss
                            ┃ ┃ ┣ 📂abstracts
                            ┃ ┃ ┣ 📂base
                            ┃ ┃ ┣ 📂components
                            ┃ ┃ ┣ 📂layout
                            ┃ ┃ ┣ 📂pages
                            ┃ ┃ ┣ 📂themes
                            ┃ ┃ ┣ 📂vendors
                            ┃ ┃ ┗ 📜style.scss
                            ┃ ┗ 📂webfonts
                            ┣ 📂components
                            ┃ ┣ 📂base
                            ┃ ┃ ┣ 📂buttuns
                            ┃ ┃ ┣ 📂cards
                            ┃ ┃ ┣ 📂icon
                            ┃ ┃ ┣ 📂modals
                            ┃ ┃ ┣ 📂slots
                            ┃ ┣ 📂footers
                            ┃ ┣ 📂headers
                            ┃ ┣ 📂modules
                            ┃ ┃ ┣ 📂about
                            ┃ ┃ ┣ 📂blog-details
                            ┃ ┃ ┣ 📂checkout
                            ┃ ┃ ┣ 📂contact
                            ┃ ┃ ┣ 📂course-details
                            ┃ ┃ ┣ 📂gellary
                            ┃ ┃ ┣ 📂index
                            ┃ ┃ ┣ 📂index2
                            ┃ ┃ ┣ 📂index3
                            ┃ ┃ ┣ 📂index4
                            ┃ ┃ ┣ 📂mentor
                            ┃ ┃ ┗ 📂mentordetails
                            ┃ ┣ 📂partials
                            ┃ ┃ ┣ 📂newsletters
                            ┃ ┃ ┣ 📂preloaders
                            ┃ ┗ 📂themes
                            ┣ 📂composables
                            ┣ 📂layouts
                            ┣ 📂middleware
                            ┣ 📂pages
                            ┣ 📂plugins
                            ┃ ┗ 📜vue-easy-lightbox.js
                            ┣ 📂public
                            ┃ ┣ 📂api
                            ┃ ┗ 📂images
                            ┣ 📂server
                            ┣ 📂stores
                            ┣ 📂utils
                            ┣ 📜.env
                            ┣ 📜app.vue
                            ┣ 📜error.vue
                            ┣ 📜nuxt.config.ts
                            ┣ 📜package.json
                            ┣ 📜tsconfig.json
Help: Farther details can be found here official documentation https://nuxtjs.org/

Dependencies

Modules used in the theme

Dependencies used by Educax Nuxt Theme are listed here.

  • "@nuxt/content": "^2.2.2"
  • "@nuxtjs/style-resources": "^1.2.1"
  • "@pinia/nuxt": "^0.4.6"
  • "@popperjs/core": "^2.11.6"
  • "core-js": "^3.26.1"
  • "nuxt": "3.0.0"
  • "sass": "^1.56.2"
  • "sass-loader": "10"
  • "swiper": "^8.4.5"
  • "@nuxtjs/axios": "^5.13.6"
  • "@pinia/nuxt": "^0.4.6"
  • "aos": "^2.3.4"
  • "lightcase": "^2.5.0"
  • "bootstrap": "^5.2.3"
  • "vue-easy-lightbox": "^1.15.0"
  • "vue-js-counter": "^1.0.3",
  • "fontawsome: "^3.6.1"

Installation

Start Building, you need to take these following steps.

How to run

Before going further, you have to install Node.JS and NPM.

  1. Install Node.js and NPM
    You can download latest Node.js from https://nodejs.org/en/download/ and install it on your system. NPM comes bundled with Node.js
  2. Install npm packages
    In terminal go to your project root directory and run npm install command, it will download all the dependencies inside of node_modules folder.
Running Vue Development server

Follow the command:

  1. npm install or yarn install
  2. npm run dev or yarn run dev

access http://localhost:3000/ to run your app/project on browser. The app will automatically reload if you change any of the source files. As npm start runs watch command which detects any change in project files so it will automatically reload your app on browser if you make changes in files.

Production Building

Before you build your project, please see nuxt.config.js carefully and customize. Run npm run generate command to build the project. The build artifacts will be stored inside the dist directory.

  • npm install or yarn install
  • npm run build or yarn build
  • npm run generate or yarn generate

Upload Files to server

To upload Nuxt generated files to a server, you need to first generate all the content by running npm run generate. This will create a /dist folder in your project.

You can then copy all the files from this folder to your server. If you have some content that depends on the user, you need to deploy it as a SPA. To do this, change mode in nuxt.config.js to spa, run npm run build, and deploy the created dist/ folder to your static hostings like Surge, GitHub Pages or nginx.

Further info

To get more help. https://nuxt.com/

How To Customize

While developing a website using our template, you will need some modification to adjust your web to your idea. Making a new component with existing ones will be questionable for users who have a first touch in our template. We are going to give some examples to have you understand about our components.

Import component

Importing a component is the first step in customizing.Item is the most friquently used component. Educax provide you with several types of Items that are used in various layouts. Even though we've accommodated suitable Items for each demo but you may have better idea about it.
<import PageHeader from '@/components/partials/PageHeader.vue'';>

Mapping Props

The next step after component importing is sending props to component. Remember that the props you are going to send must be already defined in the component before you do it. And Prop names should always use camelCase during declaration, but kebab-case in templates. Also misusing props will bring about issues and even fatal errors. So you should check props carefully to prevent failure. 

   <CourseCardFour :courseDetails="item" />
    />

Change Carousel Setting

Educax used swiper slider for carousel. In order to give setting to swiper slider, you should customize it as you want.

    {
        spaceBetween: 20,
        autoplay: false,
        slidesPerView: 4,
        isCustomNav: true,
        breakpoints: {
            576: {
                slidesPerView: 2
            },
            992: {
                slidesPerView: 3
            }
        },
        navigation: {
            nextEl: '.swiper-nav .swiper-next',
            prevEl: '.swiper-nav .swiper-prev'
    }

How To Change Style

Modify SASS

Since Nuxt support importing scss, you could get the benefit of it. Pls open the static/scss/demos, add the scss code you want. Demo-home.scss is typically used to change the style of index page, demo-base.scss is for header and footer, and demo-custom.scss is for shop and product pages.
Thanks to the hot reloading, you could the style changes immediately.

Example: Base variables

Default Configuration variable in assets/scss/abstracts/_variables.scss 

                                        

        $bootstrap-sass-asset-helper: false !default;

        // Variables

        // Colors

        $title-color: #ffffff;
        $theme-color: #28DBD1;
        $primary-color: #0A1F2F;
        $secondary-color:#E84217;
        $border-color: #A2A3E4;
        $white-color: #fff;
        $ash-color: #2F3D5F;
        $body-color: #02121D;
        $black-color:#000000;
        $text-color:#C1C7CB;
        $dark-color:#191919;

        $success-color:#12FF4D;
        $fail-color:#ff2812;

        // social-media color
        $facebook: #3b5998;
        $twitter: #55acee;
        $linkedin: #007bb5;
        $skype: #2fb7df;
        $youtube: #cd201f;
        $google: #dd4b39;
        $camera: #e4405f;
        $instagram: #e4405f;
        $tumblr: #34465d;
        $behance: #1769ff;
        $star: #e9ba17;
        $green: #0be881;
        $green-h: #0fbcf9;
        $red: #f53b57;
        $yellow: #dec32b;
        $nell: #212fb4;
        $navy: #d8e0f3;
        $placeholder: #a0a6bc;

        //== Typography

        // font-family

        $text-font: 'Roboto',
        sans-serif;

        $title-font: 'Rajdhani',
        sans-serif;

        // font-size

        $fs-base: 16px !default;
        $fs-small:14px;
        $fs-h1: 65px;
        $fs-h2: 44px;
        $fs-h3: 32px;
        $fs-h4: 24px;
        $fs-h5: 22px;
        $fs-h6: 20px;

        // transition
        $transition: all 0.3s ease;

Example: Customize header

Following codes are used to customize vairable sass/demo/_demo-variables.scss

  • If you want to override config, please use set mixin and write variable.
  • If you want to remove unnecessary css code, please set false value.
                                        
    // Demo 4 Variables
    @include set(
        header: (
            middle: (
                color: $primary-color-dark
            ),
            logo: (
                max-width: 111px,
                max-width-mobile: 90px
            ),
            top-notice: (
                link-background: #0075af
            ),
            search: (
                height: 40px,
                divider: 1px solid #fff,
    
                border: (
                    width: 5px,
                    color: $primary-color
                ),
                btn: (
                    min-width: 40px
                ),
                select: (
                    padding-left: 15px,
                    padding-right: 14px
                )
            ),
            separator: (
                space: 14px
            ),
            social-icon: (
                space: 3px
            )
        ),
        ...
    )

Change Log

Welcome to Tork ! Get familiar with the Stripe products and explore their features:

April 16, 2023

Version Name

1.0.0

Initial The initialize template