Documentation
Vue/Nuxtjs Portfolio Template
UiCamp Vue/Nuxtjs Template is a creative & modern template, A perfect place for your creative portfolio. Multiple demoes are included in this template with lots of CSS and Vue animations, Responsive based on Bootstrap 5.
- Author: UiCamp
- Last Update: 12 December, 2023
If you have any questions that are beyond the scope of this help file, Please feel free to contact us via UiCamp.
Features
- Based on Vue 3 & Nuxt 3
- Based on Bootstrap 5
- Based On SCSS
- Creative layouts
- 100% Responsive
- Easy to Customize
- Minimal and Clean
- Fonts Awesome Icons
- Well Documentation
- Free Updates
- All files are well commented
- Displays well in all modern browsers
Files Include
[template_name]_nuxtjs
Folder contains main template code & all vue
, json
,
scss
, css
, images
, fonts
, js
files
[template_name]_nuxtjs_docs
Documentation folder of "template nuxtjs" written in html
css
Installation
Follow the steps below to setup your template:
- Download the latest theme source code from the Marketplace.
-
Download and install Node.js and npm from Nodejs. The suggested version to install is
LTS
. -
Open terminal in template_nuxtjs template folder.
> cd /template_nuxtjs/
-
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 run preview
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
.output/public
directory.
Run npm run preview
to serve the
.output/public
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:
consider reading the documentation in the official nuxt website https://nuxt.com/docs/getting-started/deployment#static-hosting
Folder Structure
Template 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 |
---|---|
.nuxt |
Folder contains the development mode artifacts. created by nuxt after running the
project for development using npm run dev |
.output |
Folder contains the build artifacts. created by nuxt after building the project for
production using npm run generate |
assets |
Folder contains all global app assets like css and scss styles. |
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 |
public |
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. |
app.vue |
Nuxt will treat this file as the entrypoint and render its content for every route of the application |
nuxt.config.ts |
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
/template_nuxtjs/layouts
folder contains all template layouts.
File | Description |
---|---|
preview.vue |
Vue component represents the Preview layout for main Landing Preview page |
default.vue |
Vue component represents the default layout for most of the project pages |
Pages Folder
/template_nuxtjs/pages
folder contains template pages files.
Folders content:
/creative-agency.vue
/landing.vue
/blog.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
/template_nuxtjs/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. Main
Folder contains all the components of Home Main page
/CreativeAgency
Header.vue
//= Creative Agency Header Component
Services.vue
//= Creative Agency Services Component
...
/Blog
Header.vue
//= Blog Header Component
...
...
Each folder contains a vue components that is imported and rendered in some pages component.
Data Folder
/template_nuxtjs/data
folder contains static app data in json
format.
Each folder contains a page components data stored in JSON
format.
/CreativeAgency
header.json
//= Creative Agency Header Static Data
services.json
//= Creative Agency Services Static Data
...
/Blog
header.json
//= Blog Header Static Data
...
...
Each file contains JSON
data that imported and rendered on it's component.
Common Folder
/template_nuxtjs/common
folder contains common helper functions.
Each file is JavaScript
function that is commonly used in project
components.
Plugins Folder
/template_nuxtjs/plugins
directory contains your Javascript plugins that you want to run
before
instantiating the root Vue.js Application.
read more about nuxt plugins https://nuxt.com/docs/guide/directory-structure/plugins
This is the place to add Vue plugins and to inject functions or constants. Every time you
need to use defineNuxtPlugin
, you should create a file in plugins/ and add its path to
plugins
in nuxt.config.ts
Code Structure
Main template components code structure
Layout
/template_nuxtjs/layouts/[layout].vue
Vue component that contains app layout.
// /layouts/default.vue
<template>
<CommonCursor />
<CommonProgressScroll />
<slot />
</template>
Layout component wraps pages content and contains specific configurations such as common
components
, css
or scripts
.
Page
/template_nuxtjs/pages/[page_folder]/[page].vue
Vue component that contains a page code.
// pages/index.vue
<template>
<CommonLoader />
<div id="smooth-wrapper">
<div id="smooth-content">
<PreviewNavigation />
<main>
<PreviewHeader />
<PreviewPortfolio />
</main>
<PreviewFooter />
</div>
</div>
</template>
<script setup>
//= Page Metadata
definePageMeta({
layout: "preview",
});
//= Page Head
useHead({
titleTemplate: `%s - Preview`,
script: [
{ src: "/assets/js/smoother-script.js", defer: true }
]
});
</script>
Component
/template_nuxtjs/components/[component_folder]/[component].vue
Vue component contains part
of
a
page code.
// components/Landing/Accordions.vue
<template>
<section class="section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex align-items-center justify-content-center">
<div class="exp valign text-center">
<div class="full-width">
<h2>12+</h2>
<h6> class="sub-title">Years of Experience</h6>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="accordion bord full-width">
<div class="sec-head mb-70">
<span> class="sub-title mb-15 opacity-8">- Services</span>
<h3 class="text-u f-bold fz-50">What We <span> class="f-ultra-light">Do</span> ?</h3>
</div>
<div v-for="(item, index) in data" :key="item.id"
:class="`item ${index !== data.length - 1 ? 'mb-20' : ''} wow fadeInUp`"
:data-wow-delay="`${(index * 0.2) + 0.1}s`" @click="openAccordion">
<div class="title">
<h4>{{ item.title }}</h4>
<span> class="ico"></span>
</div>
<div class="accordion-info">
<p>{{ item.content }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup>
// Import the necessary modules and data
import data from '@/data/Landing/accordions.json';
// Function to open accordion
function openAccordion(event) {
document.querySelectorAll('.accordion .item').forEach(el => {
el.classList.remove('active');
el.querySelector('.accordion-info').style.display = 'none';
});
event.currentTarget.classList.add('active');
event.currentTarget.querySelector('.accordion-info').style.display = 'block';
}
</script>
Data
/template_nuxtjs/data/[data_folder]/[data_file].json
JSON file stores component data.
// src/data/CreativeAgency/services.json
[
{
"id": 1,
"icon": "/assets/imgs/serv-icons/0.png",
"title": "Digital Marketing",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
},
{
"id": 2,
"icon": "/assets/imgs/serv-icons/1.png",
"title": "Brand Strategy",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
},
{
"id": 3,
"icon": "/assets/imgs/serv-icons/2.png",
"title": "SEO Optimization",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
},
{
"id": 4,
"icon": "/assets/imgs/serv-icons/0.png",
"title": "Content Creation",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
}
]
Source & Credits
Images:
- Pexels - https://pexels.com
- Unsplash - https://unsplash.com
Images are only for demo purpose and not included with the download bundle.
Fonts:
- Google Fonts - https://fonts.google.com
Scripts:
- Nuxt 3 - https://nuxt.com
- Vue 3 - https://vuejs.org
- Bootstrap 5 - http://getbootstrap.com
- Swiper Carousel - https://swiperjs.com
- GSAP Animations - https://greensock.com/gsap
Thank you for purchased UiCamp template
We truly appreciate and really hope that you'll enjoy our template!
If you like our template, plase rate us 5 star !