Menu
Live Preview

#Introduction

LandingPro Nuxtjs is powerful and easy to use Web template. It allows you to create anything like complete websites, blog pages, portfolio pages, About etc in no-time. It comes with some stunning pre-build niche demos to make your life even easier to use it directly for your projects.

LandingPro Nuxtjs is built with Vuetify 3.
We have included Figma File file to extend your project development.
These theme is ready to use and you can totally customize as per your requirement.
For Customize, You should have knowledge of Nuxtjs, Axios, CSS and HTML to be able to modify these template.

LandingPro contains 10+ Niche Homepages, 3000+ Premium Font Icons & counting.., which allows you to create anything you want in few minutes. Our ready to use sections will allow you to just drag and drop it to new page with well defined guide of what CSS, HTML & JS code you would required to use each section, which makes it even easier to create something amazing in no-time. We are bound to update our Product and we keep adding new things to make it even stronger day by day. You will receive all updates free for 1 year.

This documentation will guide you about how to use our Product to create your own projects faster.

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules.

#Installation

1. How to install nuxt

Open a terminal (if you're using Visual Studio Code, you can open an integrated terminal) and use the following command to create a new project:
1. Install with npx:
    
npx nuxi init <project-name>   // Give project name

2. Requirements

Before proceeding, you need to have the latest stable node.js
Recommended environment:
  • node js 14+
  • npm js 6+

3. Install

Open package folder and install its dependencies. We recommanded yarn or npm.
1. Install with npm:
    
cd project-folder/packages
npm install
2. Install with yarn:
    
cd project-folder/packages
yarn install

4. Start

Once npm install is done now you an run the app.
    
npm run dev
This command will start a local webserver http://localhost:3000
    
Nuxt 3.10.3 with Nitro 2.8.1

➜  Local:   http://localhost:3000/
➜  Network: use --host to expose

5. Build / Deployment

After adding url run below command for build a app.
    
npm run build or yarn build

#Package Structure

  • Landingpro-Nuxtjs-Kit

    • docs
    • packages
      • main
        • _mockApis
        • assets
          • scss
        • components
          • demos
          • pages
          • shared
          • style-components
          • ui-components
        • layouts
          • footer
          • header
          • logo
          • shared
          • blank.vue
        • pages
          • about
          • blog
          • contact
          • demos
          • portfolio
          • service
          • ui-components
          • index.vue
        • plugins
          • vuetify.ts
        • public
          • images
        • store
          • blog.ts
          • portfolio.ts
        • types
          • demos
          • footer
          • header
          • homepage
          • page
        • utils
          • axios.ts
        • app.vue
        • error.vue
        • nuxt.config.ts
        • package.json
        • tsconfig.json

#How To Change Logo

#How To Add Header

For add header explained below

1. File path: layouts/header
      • main
        • layouts
          • header
          • NavCollapse
          • NavGroup
          • NavItem
          • CenterHeader.vue
          • ColorHeader.vue
          • RightHeader.vue
          • SearchHeader.vue
2. How to use header
      
<script setup lang="ts">
  import Header from '@/layouts/header/CenterHeader.vue';  //Import Header
</script>
<template>
  <Header />    //Use Header
</template>

#How To Add Footer

For add footer explained below

1. File path: layouts/footer
      • main
        • layouts
          • footer
          • ConferenceFooter.vue
          • CorporateFooter.vue
          • CourseFooter.vue
          • ItFooter.vue
          • MedicalFooter.vue
          • nftFooter.vue
          • PaymentFooter.vue
          • RealEstateFooter.vue
2. How to use footer
                  
<script setup lang="ts">
  import Footer from '@/layouts/footer/CorporateFooter.vue';   //Import Footer
</script>
<template>
  <Footer />    //Use Footer
</template>

#How to change theme colors

to override theme colors follow the below steps

1. File path : plugins/vuetify.ts
         
//Declare theme colors
const themecolors: ThemeDefinition = {
    colors: {
      primary:'#2f73f2',
      secondary:'#46c4ff',
      danger:'#dc3545',
      info: '#6bc1f9',
      success:'#3cd278',
      warning:'#f9c78f',
      light:'#f0f6fa',
      muted:'#668199',
      dark:'#102d47',
      purple: '#cad7fd',
      lightmuted:'#f8fafc' ,
      lightprimary:'#DAE7FF',
      lightinfo:'#f3f9fd',
      lightinverse:'#dfebfc',
      lightgray:'#e2e8f3',
      lightprimarygray:'#effbff',
      darkprimarygray:'#1358d8',
      lightdarkdanger:'#fbcac9',
      lightdarkwarning:'#ffe8af',
      lightdarksuccess: '#7df9c2',
      lightsuccess:'#cefcf4',
      lightdarkgray:'#bccfe1',
      themecolordark: '#102c46',
      inputdark:'#143655',
      darkprimary: '#2862ce',
      darkBorder:'#153757',
      darkblue:'#102d47',
      lightborder:'#E5ECF8',
      background: '#fff',
      surface: '#fff',
      'on-surface-variant':'#fff',
      white:'#fff',
    },
};

#Theme fonts

To change theme fonts follow the below steps

1.Choose your fonts from google fonts and add a link on : assets/scss/style.scss 
         
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
2. Change Font family : assets/scss/_variables.scss
         
$body-font-family: 'DM Sans' !default;

#Support

We at Adminmart.com offers affordable Customization services for our templates. For any Customization work, please submit ticket on adminmart.com/support

Before creating ticket, please make sure your question is regarding support only and not for Customization and also follow full documentation to make sure the question / bug you are posting is not mentioned in documentation.

Includes

  • Answering your questions or problems regarding the template.
  • Giving solution to the Bugs reported.

Does not Includes

  • Customization Work
  • Any Installation Work
  • Support for any Third Party Plugins / Software
  • Support or Guide for How to integrate with any technologies (like, PHP, .net, Java etc)
  • Solve bug in your implemented template