npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vitely/vue2

v0.0.10

Published

Vitely for vue 2.7

Downloads

5

Readme

@vitely/vue2

Vitely for vue 2.7

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 (Vuex, Pinia)
  • Plugins
  • Layouts
  • Middlewares
  • Server Side Rendering

Getting Started

On your vite.config

import vitelyVue2 from '@vitely/vue2';
import { defineConfig } from 'vite';

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

Features

App entry file

The default app file is an app.vue file on your vite root

If there is none, a default one will be used:

<template>
    <vitely-layout-manager>
        <router-view />
    </vitely-layout-manager>
</template>

The App component is the main component of your application, every other component (pages, layout, etc) will be a descendent of the App.

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

Layouts

By using the <vitely-layout-manager> component, you can set the layout: "layout-name" property on every page to use a Layout as a wrapper component.

A layout is a normal component with a

<template>
    <div>
        <h1>Some fancy header</h1>
        <div class="content">
            <slot />
        </div>
    </div>
</template>

Every file in your layouts directory is a layout.

Ex: With a filesystem like this

layouts
 ├── default.vue
 ├── admin.vue
 └── client.vue

Now you can use layout: "admin" (or client or default) on every page. The layout default will be used if no layout is used in the chain or no layout can be found.

Plugins

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

Example of a vuetify plugin plugins/vuetify.ts

import Vuetify from 'vuetify';
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import { definePlugin } from '@vitely/vue2/runtime';

Vue.use(Vuetify);

export default definePlugin((context) => {
    const { options } = context;
    // Options will be passed to the Vue constructor
    options.vuetify = new Vuetify({});
});

And in your vite.config

export default defineConfig({
    plugins: [
        vitelyVue2({
            // ...
            plugins: ['/plugins/vuetify.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

Standalone server (Experimental)

Using the server: { standalone: true }option, vitely will create a full server contained build powered by fastify

Everything your bundle will need will be on the dist folder

To start the standalone script run node dist/server/index.js dist/client

Server Side Rendering (Experimental)

With the ssr: true option, vitely will render your apps on the server side. This mode requires you to setup the build scripts above.

Migrating from other Frameworks

Nuxt2

By using this shim.nuxt2 config, you will enable a few features

  • Dynamic routes files must start with underscore _id.vue instead of [id].vue
  • @nuxtjs/composition-api will be shimed. Currently useStore, useRoute and useRouter only.
  • nuxt-child and nuxt-link components will be aliased to router-view and router-link

How to migrate

  1. Edit your vite.config

    import vitelyVue2 from '@vitely/vue2';
    import { defineConfig } from 'vite';
    
    export default defineConfig({
        plugins: [
            vitelyVue2({
                // ...
                shim: {
                    nuxt2: true,
                },
            }),
        ],
        resolve: {
            alias: {
                '~': __dirname,
                '@': __dirname,
            },
        },
    });
  2. Change your layouts from <nuxt/> to <slot />

  3. Create an index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta
                name="viewport"
                content="width=device-width, initial-scale=1.0"
            />
            <title>My application</title>
        </head>
        <body>
            <div id="app"></div>
        </body>
    </html>

Configuration Reference

ssr?: boolean (default: false)

Enables or disable SSR. See Server Build

server.standalone?: boolean (default: false)

Enables or disable the standalone server build. See Server Build

pages?: string (default: "pages")

Pages directory to scan for routes