Vuero Vue3 - Multipurpose Admin and Webapp Template
▶️ Getting started
First of all, Thank you so much for purchasing this template and for being our loyal customer. You are awesome! You are entitled to get free lifetime updates to this product and support from the cssninjaStudio team directly. Vuero is a product built by cssninjaStudio and Digisquad.
Prerequisites
- A recent web browser (Chrome, Edge, Firefox, ...)
- Nodejs LTS (> 14.x with npm >7) installed
- Knowledge with Typescript (> 4.x) (should not be installed globally)
- (recommended) [VSCode](https://code.visualstudio.com/ with Volar
Install nodejs
First, check if you already have node and npm installed. To check if you have Node.js installed, run this command in your terminal:
node -vTo confirm that you have npm installed you can run this command in your terminal:
npm -vIf node is not installed on your machine, you can go to the official nodejs.org website, and choose the version depending on your operating system:
Check the npm version
npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm. Luckily, npm knows how to update itself! To update your npm, type this into your terminal:
npm install --global npm@latestInstalling Yarn (recommended)
We personally recommend Yarn as we think it is a better package manager than npm. If you want to use Yarn, keep in mind that you should not mix the 2. You either use Yarn or Npm in a project, never both.
npm install --global yarn
📦 Dependencies installation
To setup the template and start installing project dependencies, run one of the following commands:
# using npm v7
npm install --legacy-peer-deps
# using yarn
yarn install
🔃 Run a development server
To start the development server, run one of the following commands:
# using npm v7
npm run dev
# using yarn
yarn devThis will run the dev script from the package.json file.
You will notice that two servers are started: one for the frontend (vite) and one for the backend (json-server).
Vite is the build tool that we use to compile the frontend code.
It replace webpack and vue-cli, used in vue 2 ecosystem.
You can only start vite with dev:vite
Read more about it on vitejs.dev
Json-server is a fake REST-API server that we use to simulate the backend.
The configuration and the database are in the /json-server directory.
You can find how we use it in the /src/pages/messaging-v1.vue file and the /src/composable/useChatApi.ts
You can only start vite with dev:json-server
Read more about it on github.com/typicode/json-server
- Access the Vuero frontend in your browser at http://localhost:3000/
- Access the Json-server backend in your browser at http://localhost:8080/
💡 What to do next ?
Our online documentation is a great place to learn how to use Vuero. We try to keep it mostly up to date, so you can always find the latest information.
We also have a great discord community where you can ask questions and show your work.
Vuero on docs.cssninja.io
cssninjaStudio on youtube.com
We try to keep Vuero dependencies and best practices up to dates. We also take care of user requests, either by implementing requested features, fixing bugs or improving the documentation.
If you want to contribute, feel free to create or up-vote discussions on the dedicated public github repository. You can also have access to the private github access, so you can view the source code history and submit issues. To do so, open a ticket on the support portal with your github username.