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.
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.
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.
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
images/. Each of these folders contains a specific type of file as their names suggest.
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
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
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.