Hoom

Multipurpose Agency TailwindCSS NuxtJS 3 Template

DOCUMENTATION

  • Doc version: 1.0
  • Created: 22 Dec 2023
  • Last update: 22 Dec 2023

OVERVIEW

Agon – is a Statup / Agency / SaaS Vue NuxtJS 3 template that is specifically designed to make modern websites. You can use it to build an agency, digital agency, startup agency, creative agency, creative business, creative multipurpose website, or freelance website.

It will display your content nicely on Desktop, Laptop, iPad, iPhone, Android Mobile, or tablets. This is highly customizable & looks awesome modern template. We have included the best web development practices – you can create a great website layout.

We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have.

Features

Features Overview

  • NuxtJS 3 Framework

    Nuxt is meta-framework built on top of Vue, that offers a variety of rendering modes and a ton of developer conveniences including auto-imported components and composables, page-based routing, and more!

  • Swiper Slider

    Create stunning slides with different animation effects easily with Slick Slider.

  • TailwindCSS framework

    Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.

  • Responsive Layout Design

    What ever you are using the device your site will run as it should be. Vister template is fully responsive layout for all type of devices.

Other Features

  • Thoroughly tested on real devices
  • 08 stunning homepage demos
  • Provides various inner pages such as About, Price, Projects, Project details, Pricing, FAQs, Contact, Login...
  • Completely adaptable to any device - 100% Fluid Responsive
  • All Images Are Included In The Package
  • Features a creative and unique design
  • Includes handcrafted and carefully designed inner pages to choose from
  • Utilizes NuxtJS 3 và Vuejs 3 technologies
  • Utilizes Fonts for distinctive typography
  • Ensures 100% responsiveness across all devices
  • Boasts a clean and appealing design
  • Utilizes clean and well-commented code
  • Offers ease of customization
  • Provides flexibility and multipurpose functionality
  • Built on the TailwindCSS framework
  • Detailed documentation available Here
  • Lifetime free updates
  • And much more...

What do you get?

Note

All images are just used for Preview Purpose Only. They are not part of the template and maybe NOT included in the final purchase files.

Change log

                                VERSION 1.0
                                - First release.
                            

GET STARTED

Folder Structure

  • /assets
    • /css
    • /images
  • /components
    • /elements
      • /AccordionItem.vue
      • /CounterUp.vue
      • /PageLoading.vue
      • /...
    • /footer
      • /goToTop.vue
      • /Layout1.vue
      • /Layout2.vue
    • /header
      • /darkLightToggle.vue
      • /Layout1.vue
      • /logo.vue
      • /menu.vue
    • /sections
      • /Demo1
        • /Section1.vue
        • /Section2.vue
        • /Section3.vue
        • /....
      • /Demo2
      • /About
      • /Careers
      • ....
    • /slider
      • brandLogos.vue
      • Tetimonials.vue
    • /layouts
      • /default.vue
      • /footer-2.vue
      • /no-header-footer.vue
    • /pages
      • /about
        • /index.vue
      • /demo-1
        • /index.vue
      • /demo-2
        • /index.vue
      • ....
    • /plugins
      • /wow.client.js
  • /public
    • /assets/images
  • /.gitignore
  • /app.vue
  • /error.vue
  • /nuxt.config.ts
  • /package.json
  • /README.md
  • /tsconfig.json

Structure

_app.js Structure

                                
                            

Dependencies

package.json

                                "devDependencies": {
                                    "@nuxt/devtools": "latest",
                                    "nuxt": "^3.8.2",
                                    "vue": "^3.3.12",
                                    "vue-router": "^4.2.5"
                                },
                                "dependencies": {
                                    "@nuxtjs/google-fonts": "^3.1.3",
                                    "swiper": "^11.0.5",
                                    "vue-countup-v3": "^1.4.0",
                                    "vue-range-slider": "^0.6.0",
                                    "vue-waypoint": "^4.3.0"
                                }
                            

Create a Page

Create page pages\blank.vue

                                
                                
                            

Change Color Scheme

The Nuxt.js router allows you to do client-side route transitions between pages, similar to a single-page application

A Vue component called Link is provided to do this client-side route transition.

                                
                            

Deployment

If you haven’t already done so, push your NuxtJs app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

  • Sign up to Vercel (no credit card is required).
  • After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
  • Once that’s set up, click “Import Project From …” and import your NuxtJs app. It auto-detects that your app is using NuxtJs and sets up the build configuration for you. No need to change anything — everything should work just fine!
  • After importing, it’ll deploy your NuxtJs app and provide you with a deployment URL
  • To get more help on the deployment checkout

UPDATE

Important Note:

- Backup your website and template folders completely to make sure you have a restore point in case of any complications.

Update using FTP

  1. Download the latest version of the template to your device.
  2. Connect to your hosting via FTP software
  3. Upload the template folder you unzipped to your site folder
  4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

SOURCES & CREDITS

THANK YOU

Thank you so much for using this template.

- AliThemes Team -