{"id":525,"date":"2019-09-06T10:37:03","date_gmt":"2019-09-06T10:37:03","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=525"},"modified":"2019-11-13T07:32:48","modified_gmt":"2019-11-13T07:32:48","slug":"faqs-frequently-asked-questions","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/faqs-frequently-asked-questions\/","title":{"rendered":"FAQ’s (Frequently Asked Questions)"},"content":{"rendered":"\n

Below are the most commonly asked questions about this template. We recommend you to please go through the following questions before submitting any support request, may be you will find your problem already had an answer below: <\/p>\n\n\n\n

\n\n\n\n

How to set default layout?<\/h4>\n\n\n\n

If you have any confusion in changing the default layout, please go through this section Different Layouts<\/a> to get your problem solved out. <\/p>\n\n\n\n

\n\n\n\n

How can I change the green loader?<\/h4>\n\n\n\n
\"\"
Green Loader<\/figcaption><\/figure><\/div>\n\n\n\n

We have used vue-loading-spinner<\/a> module in the template, which provides a lot of predefined loading indicators. You can easily change the loading indicator in your template.<\/p>\n\n\n\n

If you want to change the green loader, then please follow the steps given below:<\/p>\n\n\n\n

Go to the src->container<\/code> directory and open the selected layout that you are using in the app. In our case we have taken an example of Full.vue<\/code> i.e. the default layout & implemented the “Google Spin”:<\/p>\n\n\n\n

 
<template>
    <div class=\"app-default-layout\">
 <template v-if=\"loading\">
    <google><\/google> \/\/ add the component here
 <\/template>
 <\/div>
 ...
<\/template>
 
<script>
...
import { Google } from \"vue-loading-spinner\"; \/\/ import the selected loading indicator
 
export default {
  ...,
  components: {
    Google    \/\/ define your component
  }
}
 
<\/script> <\/pre>\n\n\n\n
 The “vue-loading-spinner” have some differences in the names given on the sample website & in the actual usage. So for checking the samples follow the official website<\/a> & for exact name sources do check their official GitHub<\/a> repo. <\/p><\/blockquote>\n\n\n\n
\n\n\n\n
How can I change the amount of time that the green loader shows up?<\/h4>\n\n\n\n
 Go to location src->container<\/code>, open that layout file that you are using in your template and update the time of loader. Example: we are using the default layout. <\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
\n\n\n\n
How can I customize the green loader ?<\/h4>\n\n\n\n
Please follow the steps below to customize the green loader:<\/p>\n\n\n\n
To change the width and height of the loader go to src->assets->scss->custom->_effect.scss<\/code> and update its height, width according to your requirement as mentioned in given screenshot: <\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\nTo change the color of the loader go to src->assets->scss->custom->_common.scss<\/code> and replace the variable with your required color as defined in the screenshot below:\n\n<\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
Note:<\/strong> If you want to assign the color to the $success variable then go to location src->assets->scss->_app.variables.scss<\/code> and assign your required color code as given in the screenshot: \n\n<\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
\n\n\n\n
How to remove auth0?<\/h4>\n\n\n\n
Follow the instructions given below to remove auth0 from the template:-<\/p>\n\n\n\n
1. Go to src->views->session<\/code> , open the LoginOne.vue<\/code> file and remove the Signin With Auth0 button.<\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
2. Also you need to remove it’s method from the same file as given in the screenshot. <\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
 3. Go to src<\/code> folder and delete the auth<\/code> directory. <\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
 4. Go to src->store->modules->auth<\/code> directory and open index.js<\/code> file. <\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
5. Go to src->router<\/code> directory and open index.js<\/code> file.<\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
 6. Now Open src->App.vue<\/code> file and remove auth0 variables. <\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
 That’s it, this is all you need to do to remove the auth0. <\/p>\n\n\n\n
\n\n\n\n
How to enable user tour in development mode?<\/h4>\n\n\n\n
Tour by default works in production mode only. If you want to show it in development mode, then go to the src->constants<\/code> and open AppConfig.js<\/code> file and set the enableUserTour<\/code> variable to true<\/code>.<\/p>\n\n\n\n
\/**
 * App Config File
 *\/
export default {
 appLogo: '\/static\/img\/site-logo.png',  \/\/ App Logo,
 darkLogo: '\/static\/img\/site-dark-logo.png', \/\/ dark logo
 appLogo2: '\/static\/img\/session.png',  \/\/ App Logo 2 For Login & Signup Page
 brand: 'Vuely',   \/\/ Brand Name
 copyrightText: 'Vuely \u00a9 2018 All Rights Reserved.',  \/\/ Copyright Text
 enableUserTour: true    \/\/ Enables the User Tour In Development Mode
} 
<\/pre>\n\n\n\n
\n\n\n\n
How to run Production Build?<\/h4>\n\n\n\n
Follow the instructions given below to run dist<\/code> (production build):<\/p>\n\n\n\n
Install http-server globally in your machine<\/strong><\/p>\n\n\n\n
For window: run npm install -g http-server<\/code> in the administrative privileges.\nFor macOS and Ubuntu: run sudo npm install -g http-server<\/code><\/p>\n\n\n\n
Now go the project directory and run http-server .\/dist<\/code><\/p>\n\n\n\n
\n\n\n\n
How to integrate Api’s in Vuely?<\/h4>\n\n\n\n
Vuely comes with Api’s ready means you can easily integrate api’s and connect with the backend server as well. Follow these steps to integrate api’s:<\/p>\n\n\n\n
1.You can pass the api path as value for  baseURL<\/code> key in the vuely\/src\/api\/index.js<\/code> file:<\/p>\n\n\n\n
import axios from 'axios'; \nexport default \n   axios.create({ \n      baseURL: 'https:\/\/vuely.theironnetwork.org\/data\/'\n   }); <\/pre>\n\n\n\n
2. Here is an example to integrate api. Open vuely\/src\/components\/Widgets\/TodoList.vue<\/code> file: <\/p>\n\n\n\n
<template>
  ...
<\/template>
 
<script>
...
import api from \"Api\";
 
export default {
   data() {
     toDoLists: null
   },
   mounted() {
      this.getTodos();
   },
   methods: {
       getTodos() {
          api 
           .get(\"vuely\/todo.js\") 
           .then(response => { 
              this.toDoLists = response.data; 
            }) 
            .catch(error => { 
               console.log(\"error\" + error
            ); 
         });
       }
       ...
   }
}
<\/script> <\/pre>\n\n\n\n
\n\n\n\n
How to change the color of the template?<\/h4>\n\n\n\n
Here are step by step instructions to change the color on the template.<\/p>\n\n\n\n
Case1: Change Theme’s<\/strong><\/p>\n\n\n\n
Please check the Themes<\/a> section to get detailed information about changing the theme’s in the template.<\/p>\n\n\n\n
Case2: Change Theme Color<\/strong><\/p>\n\n\n\n
Please check the Style Customization<\/a> section to get knowledge about changing the theme color in the template.<\/p>\n\n\n\n
\n\n\n\n
How I can disable the FIREBASE?<\/h4>\n\n\n\n
Follow these instructions to disable the firebase:-<\/p>\n\n\n\n
1). Remove the firebase from the src->main.js<\/code>.<\/p>\n\n\n\n
\"\"<\/a>
main.js
<\/figcaption><\/figure><\/div>\n\n\n\n
\n2).  Go to src -> views -> session<\/code> , open the LoginOne.vue file and remove these lines of code as mentioned in screenshots.\n\n<\/p>\n\n\n\n
\"\"<\/a>
LoginOne.vue<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
 LoginOne.vue <\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
 
LoginOne.vue <\/figcaption><\/figure><\/div>\n\n\n\n
\n3). Remove firebase folder  from the location src\/firebase.<\/code><\/p>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
\n4). Go to src -> store -> modules -> auth -> index.js <\/code>and remove below lines of code as mentioned in screenshots.\n\n<\/p>\n\n\n\n
\"\"<\/a>
index.js<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
index.js<\/figcaption><\/figure><\/div>\n\n\n\n
\n5). Go to src -> views -> session<\/code> , open the SignUpOne.vue file and remove all methods for firebase login authentication.\n\n<\/p>\n\n\n\n
\"\"<\/a>
SignUpOne.vue<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
 SignUpOne.vue <\/figcaption><\/figure>\n\n\n\n
 6). Also run \"npm uninstall --save firebase\"<\/code> to uninstall the package from the dependencies.<\/p>\n\n\n\n
\n\n\n\n
This template is build with scss?<\/h4>\n\n\n\n
Yes, this template uses scss variables, mixins and proper structure of the scss so as to provide you the full control over the styling. Using scss variables, you can customize the whole template as much as you can. Please check the src->assets->scss<\/code> folder in the template to have an inside look of the scss variables used in the template<\/p>\n\n\n\n
\n\n\n\n
Integrate the template with NUXT, Is it possible?<\/h5>\n\n\n\n
Yes, it is possible to integrate NUXT<\/strong> with Vuely<\/strong>. Here is step by step instructions to integrate:<\/p>\n\n\n\n