Our offer includes versions created with the JavaScript framework developed by Evan You, specifically designed for Vue developers. These Vue templates use Vite as a build tool and are ready to be deployed. This standard configuration allows you to easily customize and adapt them to your specific needs. As a result, you can save time and effort in the development process.
The Vue templates are a great starting point for creating SSR (Server Side Rendered) apps using higher-level solutions such as Nuxt, Quasar or Vite SSR. These solutions are recommended in the official documentation and can help you create robust and scalable Vue applications.
Quickstart
Getting started with the Vue templates is a straightforward and fast process, much like with HTML and React templates. After downloading the purchased template, find the zip file with the -vue suffix and extract it.
Open the resulting folder in your preferred code editor, launch the terminal, and install the required dependencies by running the command npm i. Once the dependencies are installed, you can start a development server by running npm run dev, which will allow you to work on the site’s content.
Vite will recompile the CSS and update the page whenever you modify a class inside the HTML, without requiring you to refresh the browser window.
Folder structure
The template’s folder structure is incredibly easy to comprehend. The root directory houses all the necessary files essential for the Vue template to function, including the Vite configuration and PostCSS files.
The src/ folder is where you’ll find all the necessary files to personalize the template. Within this folder, Vue components are organized into three main sections:
pages/includes all the pages that make up the template.partials/provides all partial components such as the header, footer, and other page elements.utils/contains utility and reusable components like modals, dropdowns, and more.
In addition to the three primary folders mentioned earlier, the src/ directory also includes other folders such as css/, fonts/, and images/. Each of these folders contains a specific type of file as their names suggest.
Routing
Vue Router is the library that handles routing for Vue applications. In Cruip templates built with Vue, the routing configuration is defined in the router.js file located in the src/ directory.
This file imports all the necessary page components and specifies the routing paths for each of them using Vue Router syntax. This allows us to create a well-organized and easy-to-navigate application for users.
Adding or removing pages
As mentioned previously, page components in Vue templates are located in the src/pages/ folder. In some cases, you may need to modify the base template by adding or removing pages.
To remove a page, simply delete the corresponding .vue file that represents the page component. Additionally, you’ll need to remove the file import from the router.js file and delete the corresponding route.
To add a new page, you’ll need to create a new .vue file in the pages/ directory. You can use an existing page as a template to ensure consistency with the rest of the application.
Once the new file is created, you’ll need to import it into the router.js file and define the corresponding route.
Building and deploying your Vue app
Once you have made your desired changes to your code, it’s time to prepare it for production by running the npm run build command. This command will compile and minimize your code, producing a build output in the dist folder.
Once you have successfully built the application, you can test it locally using the npm run preview command. If everything is working as expected, it’s time to deploy your app.
You can use GitHub Pages, GitLab Pages, Netlify, Vercel, or any other hosting service you prefer. For more information, refer to the Vite documentation.