@vitely/vue NPM

@vitely/vue

Vitely for vue 3

Introduction

Vitely is a simple (yet powerful) framework built to enhance your vite experience and boost your productivity. It has builtin support for:

Routes from Directory
Store (Pinia)
Plugins
Middlewares
Server Side Rendering
Coming soon:
- Layouts

Getting Started

On your vite.config

import vitelyVue from '@vitely/vue';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        vitelyVue({
            /* Your config */
        }),
    ],
});

On your index.ts

import 'virtual:vitely/core/entry';

Create an app.vue

<template>
    <router-view />
</template>

Features

Routes

Every file in your pages directory is treated as a route.

pages
 ├── index.vue
 ├── about.vue
 ├── [[404]].vue
 ├── client
 │    ├── index.vue
 │    └── [client].vue
 └── products
      ├── index.vue
      └── [product]
           ├── index.vue
           └── create.vue

The following routes will be created

/
/about
/client
/client/:client
/products
/products/:product
/products/:product/create

And a 404 route for non existing navigation

Nested routes

If there is a folder and a file with the same param name, the file will be considered a parent route for the folder.

some-dir
 ├── [param].vue
 └── [param]
      ├── edit.vue
      └── create.vue

Plugins

A plugin is simply a file to be run before the app is setup.

Example of a element-plus plugin plugins/element-plus.ts

import { definePlugin } from '@vitely/vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

export default definePlugin(({ app }) => {
    app.use(ElementPlus);
});

And in your vite.config

export default defineConfig({
    plugins: [
        vitelyVue2({
            // ...
            plugins: ['/plugins/element-plus.ts'],
        }),
    ],
});

Middlewares

A middleware run befores every route

Example of a middleware midlewares/auth.ts

import { defineMiddleware } from '@vitely/vue2/runtime';

export default defineMiddleware(({ next, route }) => {
    if (route.path === '/forbidden') {
        next('/allowed');
        return;
    }
});

And in your vite.config

export default defineConfig({
    plugins: [
        vitelyVue2({
            // ...
            middlewares: ['/midlewares/auth.ts'],
        }),
    ],
});

Server Build

Vitely also supports a custom server build. (This is what allows standalone servers and SSR rendering)

"scripts": {
    "build:client": "VITELY_TARGET=client vite build",
    "build:server": "VITELY_TARGET=server vite build",
    "build": "npm run build:client && npm run build:server"
}

For Windows users: You can use the cross-env package cross-env VITELY_TARGET=client vite build