1. Introduction
The Restaurant Theme is a fully responsive, modern, and customizable HTML template designed for restaurants, cafés, and food businesses. It includes sections for showcasing menus, special offers, customer testimonials, chefs, galleries, blogs, FAQs, pricing, and contact forms.
1.1. What's Included
After purchasing wooprex template on wooprex.com with your Wooprex account, go to your Download page. You can choose to download wooprex template only or the entire wooprex template package which contains the following files:
- Fully Responsive Design: Optimized for all devices.
- Modern & Clean UI: Sleek, professional, and user-friendly design.
- Easy Customization: Modify styles, fonts, and colors easily.
- Cross-Browser Compatibility: Works on Chrome, Firefox, Safari, and Edge.
2. Folder & File Structure
2.1. Folder Structure
Here you will find the folder structure of the entire template.
2.2. App & Layout Structure
The main contents are generating from App.vue file. It will handle all available page and error page
Here is the AppLayout.vue file looks like to visible header, body and footer:
2.3. State Management
Layout state management is handled using Vuex in the store/index.js file.
2.4. Router Structure
Configure the router paths for each page in the router/index.js file for the Single Page Application (SPA).
2.5. Component Architecture
Each .vue file follow 3 steps (template, script, style). The general template structure is the same throughout the template. Here is the general structure:
2.6. SASS Architecture
We are using SASS and the structure is given below. Here is the outlook of the SASS file:
2.7. JavaScript Architecture
We can write js in specific component (.vue) for specific file. We can also write the global js in the main.js or can create custom file (utils, composable) to write custom js. We also used so many libraries (Swiper, Gsap, CounterUp, Magnific Popup, SimpleParallax, and etc). The common structure is below:
All component and js will load from this main.js file and mount to #app in index.html
2.8. Vite Architecture
We define SASS to use as default styling and set @ for file URL ./src
3. Installation & Setup
Prerequisites:
- Node.js (>= 16.x)
- npm or yarn
Follow these steps to initialize the project:
- Download the template from the provided source.
- Extract the ZIP file and open the folder in your code editor.
- Open terminal from code editor.
- $ npm install or $ yarn install - (Install project dependencies using npm or yarn)
- $ npm run build or $ yarn build - (Generates the dist folder for deployment on a server)
- $ npm run dev or $ yarn dev - (Run the project by this command)
After running the build command, the dist folder will be generated as shown below:
Finally Run npm run dev or yarn dev to view project in browser
4. Customization Guide
4.1. Logo & Favicon
- 1. Open public folder from root
- 2. Look for the .svg file to change the logo
- 3. Replace your .svg logo with the current logo
- 4. Follow same steps for the site icon (.png) extension
4.2. Colors & Fonts
Modify src/assets/scss/base/_variable.scss to change default color and declare the font:
Modify src/assets/scss/_reset.scss to initialize google font:
4.3. Flaticon
We have used flaticon premium icon for the site. You can add icon like this:
4.4. Navigation Menu
Update the Desktop Menu by modifying its structure, design, or functionality as needed.
Update the Mobile Menu by modifying its structure, design, or functionality as needed.
4.5. Changing Images
Change the Image by replacing it with a new one, updating its source, or modifying its properties as needed.
4.6. Change Meta
Change the meta description and title by updating them in the src/plugins/use-meta.js file to improve SEO, enhance readability, and provide a more accurate summary of the page content, as shown below:
Change meta title in specific views (Home.vue) like this:
5. Responsive Design & Media Queries
We have used CSS media query to responsive the site (src/assets/scss/_responsive.scss):
6. Sources & Credits
These things we have used to build our site:
7. Support
If you need assistance with installation, customization, or troubleshooting, feel free to reach out:
- Email: help@wooprex.com
- Documentation: Official Docs
- Live Chat: Available on our website during 24 hours.
For any issues, please provide detailed information, including error messages and screenshots, to help us assist you better.