PHPackages                             mskocik/vinette - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mskocik/vinette

ActiveLibrary[Utility & Helpers](/categories/utility)

mskocik/vinette
===============

Vite-connector for nette apps

v1.0.1(2y ago)1187[3 issues](https://github.com/mskocik/vinette/issues)MITPHP

Since Feb 11Pushed 2y ago1 watchersCompare

[ Source](https://github.com/mskocik/vinette)[ Packagist](https://packagist.org/packages/mskocik/vinette)[ RSS](/packages/mskocik-vinette/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (4)Versions (3)Used By (0)

Vinette - Vite + Nette
======================

[](#vinette---vite--nette)

Easy to use vite connector to nette apps. Based on [lubomirblazekcz/nette-vite](https://github.com/lubomirblazekcz/nette-vite) and transformed into extension.

Install
-------

[](#install)

Download extension.

```
composer require mskocik/vinette

```

Register it into your Nette application. It automatically adds `asset` filter and `$vite` property to your templates.

```
extensions:
	vite: Mskocik\Vinette\Bridges\NetteDI\ViteExtension

vite:
	manifest: assets/build/manifest.json    # public path local from real www dir
	wwwDir:                         # can be omitted if it's 'www'
	devServer: http://localhost:5174        # can be omitted if your are using default 'http://localhost:5174'
```

Usage in templates
------------------

[](#usage-in-templates)

You can use filter `asset` to set path to asset properly.

```

```

Or in case you have JS files which imports some CSS files, you should use `printTags()` method. `$vite` variable is automatically injected into your templates.

```
{$vite->printTags('src/js/components.js')|noescape}

// which can result into:

// DEV

// PRODUCTION

```

Dev mode toggle
---------------

[](#dev-mode-toggle)

Dev mode is enabled/toggled by clicking on the Vite icon in the tracy bar. By default it's disabled, using production build assets.

IconStatus[![Production mode](https://raw.githubusercontent.com/mskocik/vinette/main/docs/icon-prod.png)](https://raw.githubusercontent.com/mskocik/vinette/main/docs/icon-prod.png)Production mode. Assets are being served according to definition in `manifest.json. Icon is semitransparent[![Enabled, running](https://raw.githubusercontent.com/mskocik/vinette/main/docs/icon-running.png)](https://raw.githubusercontent.com/mskocik/vinette/main/docs/icon-running.png)Dev mode enabled, serving assets directly from vite devServer[![Enabled, not running](https://raw.githubusercontent.com/mskocik/vinette/main/docs/icon-not-running.png)](https://raw.githubusercontent.com/mskocik/vinette/main/docs/icon-not-running.png)Dev mode enabled, but vite devServer is not running---

### Reference Vite config

[](#reference-vite-config)

Reference `vite.config.js` file I am using very often (includes svelte for custom elements and tailwind)

```
import FastGlob from 'fast-glob'
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';

import tailwindcss from 'tailwindcss'
import tailwindcssNesting from 'tailwindcss/nesting/index.js'
import autoprefixer from 'autoprefixer'
import postcssImport from 'postcss-import';
import postcssNested from 'postcss-nested';
import postcssCustomMedia from 'postcss-custom-media';
import { svelte } from '@sveltejs/vite-plugin-svelte'

const reload = {
  name: 'reload',
  handleHotUpdate({ file, server }) {
    if (!file.includes('temp') && file.endsWith(".php") || file.endsWith(".latte")) {
      server.ws.send({
        type: 'full-reload',
        path: '*',
      });
    }
  }
}

/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), 'DEV');

  return {
    plugins: [svelte(), reload],
    css: {
      postcss: {
        plugins: [postcssImport, tailwindcssNesting(postcssNested), postcssCustomMedia, tailwindcss, autoprefixer]
      }
    },
    server: {
      port: env.DEV_PORT || 5174,
      strictPort: true,
      watch: {
        ignored: ['!^src', '!**/app/**/*.latte']
      },
      hmr: {
        host: 'localhost',
        port: 5137,
        protocol: 'ws'
      }
    },
    build: {
      manifest: true,
      outDir: "www/assets/build",
      emptyOutDir: true,
      rollupOptions: {
        input: FastGlob.sync(['./src/js/*.js', './src/css/*.css']).map(entry => resolve(process.cwd(), entry)),
      },
      assetsDir: '',
    }
  }
})
```

Licence
-------

[](#licence)

MIT

###  Health Score

22

—

LowBetter than 23% of packages

Maintenance11

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~436 days

Total

2

Last Release

746d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e9ec054f28406f467db852e61df704d93f9a72901f760233d6d8c6a8dc9d9f59?d=identicon)[mskocik](/maintainers/mskocik)

---

Top Contributors

[![mskocik](https://avatars.githubusercontent.com/u/25513620?v=4)](https://github.com/mskocik "mskocik (15 commits)")

### Embed Badge

![Health badge](/badges/mskocik-vinette/health.svg)

```
[![Health](https://phpackages.com/badges/mskocik-vinette/health.svg)](https://phpackages.com/packages/mskocik-vinette)
```

###  Alternatives

[tomaj/nette-api

Nette api

36261.8k4](/packages/tomaj-nette-api)[contributte/menu-control

Menu control for Nette framework

29108.6k1](/packages/contributte-menu-control)[carrooi/nette-menu

Menu control for Nette framework

2950.0k1](/packages/carrooi-nette-menu)[ipub/gravatar

Gravatar creator for Nette Framework

122.0k1](/packages/ipub-gravatar)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)