# 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 Typescriptopen in new window
• NodeJS v16.15.0 or greater - Download NodeJSopen in new window
• Knowledge of Vue.js (preferably Vue 3) - Learn Vue.jsopen in new window
• 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 ArDriveopen in new window 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"
  }
  ...
}

# 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

# 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 >>.

# Repository

A fully functional example in JavaScript or TypeScript can be found at this location.

• Repository: https://github.com/ItsAnunesS/permaweb-create-vue-starteropen in new window

# 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.