Create Vue Starter Kit
This guide will provide step-by-step instructions to configure your development environment and build a permaweb Vue application.
Prerequisites
- Basic Typescript Knowledge (Not Mandatory) - Learn Typescript
- NodeJS v16.15.0 or greater - Download NodeJS
- Knowledge of Vue.js (preferably Vue 3) - Learn Vue.js
- Know git and common terminal commands
Development Dependencies
- TypeScript (Optional)
- NPM or Yarn Package Manager
Steps
Create Project
The following command installs and launches create-vue, the official scaffolding tool for Vue projects.
npm init vue@latest
yarn create vue
During the process, you'll be prompted to select optional features such as TypeScript and testing support. I recommend selecting the Vue Router
with yes, the rest can be selected as per your preference.
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / *Yes*
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Change into the Project Directory
cd <your-project-name>
Install Dependencies
npm install
yarn
Setup Router
Vue Router is the official router for Vue.js and seamlessly integrates with Vue. To make it work with Permaweb, switch from a browser history router to a hash router as the URL cannot be sent to the server. Change createWebHistory
to createWebHashHistory
in your src/router/index.ts
or src/router/index.js
file.
import { createRouter, createWebHashHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
},
],
});
export default router;
Setup Build
Configure the build process in the vite.config.ts
or vite.config.js
file. To serve Permaweb apps from a sub-path (https://[gateway]/[TX_ID]), update the base property to ./ in the config file.
export default defineConfig({
base: './',
...
})
Run the App
Before moving forward, it is crucial to verify that everything is working correctly. Run a check to ensure smooth progress.
npm run dev
yarn dev
Deploy Permanently
Generate Wallet
We need the arweave
package to generate a wallet
npm install --save arweave
yarn add arweave -D
then run this command in the terminal
node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json
Fund Wallet
You will need to fund your wallet with ArDrive Turbo credits. To do this, enter ArDrive and import your wallet. Then, you can purchase turbo credits for your wallet.
Setup Permaweb-Deploy
npm install --global permaweb-deploy
yarn global add permaweb-deploy
Update package.json
{
...
"scripts": {
...
"deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build"
}
...
}
Replace << ANT-PROCESS >> with your ANT process id.
Run build
Now it is time to generate a build, run
npm run build
yarn build
Run deploy
Finally we are good to deploy our first Permaweb Application
npm run deploy
yarn deploy
ERROR
If you receive an error Insufficient funds
, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits.
Response
You should see a response similar to the following:
Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]
Your Vue app can be found at https://arweave.net/<< tx-id >>
.
SUCCESS
You should now have a Vue Application on the Permaweb! Great Job!
Repository
A fully functional example in JavaScript or TypeScript can be found at this location.
Summary
This guide provides a simple step-by-step method to publish a Vue.js app on the Permaweb using Create Vue. If you need additional features Tailwind, consider exploring alternative starter kits listed in the guide to find a suitable solution for your requirements.