Download the PHP package praetorius/vite-asset-collector without Composer

On this page you can find all versions of the php package praetorius/vite-asset-collector. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of praetorius/vite-asset-collector

Informations about the package vite-asset-collector

Vite AssetCollector for TYPO3

Maintainability Test Coverage tests Total downloads TYPO3 versions Latest version

Bundle your TYPO3 frontend assets with vite, a modern and flexible frontend tool. This TYPO3 extension provides a future-proof integration for vite using TYPO3's AssetCollector API. This means that you can use vite's hot reloading and hot module replacement features (and many others) in your TYPO3 projects.

This extension is inspired by typo3-vite-demo which was created by Florian Geierstanger.

Installation

Vite AssetCollector can be installed with composer:

vite can be installed with the frontend package manager of your choice:

vite-plugin-auto-origin is recommended as it simplifies configuration and daily usage of vite with TYPO3.

Getting Started

1. Vite Setup

To get things started, the extension provides a console command that generates a ready-to-use vite.config.js file:

The generated configuration makes sure that vite

Note that the console command is only intended as a kickstarter for your initial vite configuration file.

More Options * You can define multiple `--entry` options. * You can add `--glob` to enable pattern matching for your entrypoint paths ([fast-glob](https://www.npmjs.com/package/fast-glob) required). * If you omit `--outputfile`, the file content will be outputted instead. * Add `--no-auto-origin` if you don't want to use [vite-plugin-auto-origin](https://www.npmjs.com/package/vite-plugin-auto-origin). Note that you need to specify `VITE_DEV_ORIGIN` manually then. * `--help` shows all available options.

2. TYPO3 Setup

Then you can use the included ViewHelper to embed your assets. If you use the default configuration, you only need to specify your entrypoint.

Layouts/Default.html:

3. Start Developing

Development environments can be highly individual. However, if ddev is your tool of choice for local development, a few steps can get you started with a ready-to-use development environment with vite, composer and TYPO3.

Instructions for DDEV

Configuration

If you use the setup as described above, no configuration should be necessary. However, you can customize almost everything to create your individual development setup:

Adjust vite dev server The extension has two configuration options to setup the vite dev server. By default, both are set to `auto`, which means: * Dev server will only be used in `Development` context * Dev server uri will be determined automatically for environments with [vite-serve for DDEV](https://github.com/torenware/ddev-viteserve) set up You can adjust both options in your `$TYPO3_CONF_VARS`, for example:
Change location of default manifest.json You can specify a default manifest file in the extension configuration. By default, this is set to `_assets/vite/.vite/manifest.json`, so it will run out-of-the-box with vite 5 if you generated your vite configuration with this extension. If you still use vite < 5, you should to change this to `_assets/vite/manifest.json`. If you change the path here, please be aware that you may need to adjust your the `outDir` in your `vite.config.js` as well: If you use the `vite.config.js` provided by the extension: If you use your own `vite.config.js`:

ViewHelper Reference

asset.vite ViteHelper

The asset.vite ViewHelper embeds all JavaScript and CSS belonging to the specified vite entry using TYPO3's AssetCollector API.

Arguments * `manifest` (type: `string`): Path to your manifest.json file. If omitted, default manifest from extension configuration will be used instead. * `entry` (type: `string`): Identifier of the desired vite entrypoint; this is the value specified as `input` in the vite configuration file. Can be omitted if manifest file exists and only one entrypoint is present. * `devTagAttributes` (type: `array`): HTML attributes that should be added to script tags that point to the vite dev server * `scriptTagAttributes` (type: `array`): HTML attributes that should be added to script tags for built JavaScript assets * `cssTagAttributes` (type: `array`): HTML attributes that should be added to css link tags for built CSS assets * `priority` (type: `bool`, default: `false`): Include assets before other assets in HTML * `useNonce` (type: `bool`, default: `false`): Whether to use the global nonce value * `addCss` (type: `bool`, default: `true`): If set to `false`, CSS files associated with the entry point won't be added to the asset collector
Example

resource.vite ViteHelper

The resource.vite ViewHelper extracts the uri to one specific asset file from a vite manifest file.

Arguments * `manifest` (type: `string`): Path to your manifest.json file. If omitted, default manifest from extension configuration will be used instead. * `file` (type: `string`): Identifier of the desired asset file for which a uri should be generated
Example This can be used to preload certain assets in the HTML `` tag:

Vite Assets in Yaml Files

Besides ViewHelpers, the extension includes a processor for Yaml files, which allows you to use assets generated by vite in your configuration files. This is especially useful for custom RTE presets:

TYPO3 Icon API

The extension includes a custom SvgIconProvider for the TYPO3 Icon API, which allows you to register SVG icon files generated by vite. This works both in frontend and backend context.

To register a new icon, add the following to the Configuration/Icons.php file:

Then you can use the core:icon ViewHelper to use the icon in your templates.

All versions of vite-asset-collector with dependencies

PHP Build Version
Package Version
Requires php Version >=8.1
typo3/cms-core Version ^11.5 || ^12.4 || ^13.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package praetorius/vite-asset-collector contains the following files

Loading the files please wait ....