Chitchat Nuxtjs Theme

Welcome to Chitchat!

We are pleased that you have chosen CHITCHAT theme for your site and we will not disappoint you with your choice. Chitchat is an excellent theme develop with a concise approach. The code written is a clean and well structured.

Chitchat is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

Chitchat theme template is build focusing on HTML & SCSS works perfectly fine in all the browsers and without jQuery.

Chitchat theme include 3 in 1 (chat app, landing-page & email template), 17 inner pages

We request to have a look at our Chitchat manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

Theme Features

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

  1. Theme - Chitchat Main Folder
  2. Documentation - Documentation for Chitchat Nuxtjs site template
  3. Email-Template - Different Email templates in html

Nuxt Folder Structure

  • assets
    • doc
    • fonts
    • images
    • scss
  • components //All component of messenger you can find from here
    • Authentication
    • blogs
    • bonus_page
    • common
    • landing-page
    • messenger
    • pagenotfound
  • data
    • chatcontent.json
    • contact.json
    • contactList.json
    • directchat.json
    • favourite.json
    • files.json
    • groupchat.json
    • layout.json //Add your favourite customiser config here
    • notification.json
    • status.json
    • sticker.json
    • wallpapers.json
  • pages //Your complete theme page will call from here
    • authentication
    • blogs
    • bonus
    • index.vue
    • messenger
    • pagenotfound
  • plugin
    • localStorage.js
    • plugin.js //Add your firebase credential here
    • vue-lightbox.js
  • static
    • favicon.png
  • store
    • index.js
    • modules
      • chat.js
      • common.js
      • groupchat.js
      • layout.js
      • sidebar.js
  • nuxt.config.js
  • package.json

Start Building

Prerequisite
Install Node.js and NPM : Download Node.js from https://nodejs.org/en/download/ and install it on your system. NPM comes bundled with Node.js
Theme

When you extract file from download you will find following folder:

  • Theme
  • EmailTemplate
  • Documentation
For Start working with runnning your Chitchat theme you need to follow below step:
  • Extract theme folder
  • npm i
  • npm run dev
  • Once your frontend runs successfully you can see it in http://localhost:3000
For building Chitchat theme you need to follow below step:
  • Build you application for host on server using below command:
  • npm run build
  • It will create one dist file in your theme folder. Make zip of dist folder. so here you are ready to upload your theme on server.

Scss

Customizer

You can customise your Chitchat Messenger using customiser

To change the RTL mode to LTR or Change color from any color then you can just select the option from customiser as attached in below screenshot

Now to customize theme you can select Color, Layout, Chat Wallpaper, Sidebar of your own choice.

By selecting you can change Color of whole Messenger theme.

In Layout you can select different layout option.

In Chat Wallpaper there are many options are there, by using them it change the wallpaper of your chat.

In Sidebar you can select any default sidebar .

Now to change your project according to configuration which you have set you just need click on Configuration button and copy that config as displyed in below image and paste in layout.json in data/layout.json

Remove Customizer

How to Remove default Customizer from Application?

You just need to removed called Customizer component from messenger >> index.vue and you can't see it more.

Firebase

Suppose you want to remove or change firebase credential you just need to set in plugin.js in plugin/plugin.js

firebase

Fonts

You can set font of your choice in nuxt.config.js

<!--Google font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,600&display=swap"rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"rel="stylesheet">

Thank you

Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

Best Regards,
Pixelstrap