Front End Assets ​

There are three ways of including front end assets like js and css, either via a remote url/cdn, statically from your project, or via vite.

The assets directory ​

The first thing to mention is that you should not use your theme's /style.css at all in Forme projects. The only thing that needs to go in there is your theme metadata to show in the WP admin panel, which is a slightly bizarre historical quirk of WordPress.

All your assets files should live either in /assets/src or in /assets/static

Remote url/cdn ​

For remote url/cdn dependencies, you can include them within the relevant queue registry, either public or admin. For example, here we are removing WordPress's version of JQuery and replacing it with the latest version

wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-4.0.0.min.js', [], false, true);

Static Assets ​

Static assets live in assets/static. Again you can include them using the relevant queue registry. You can leverage the Assets helper class to generate the uri and to add a cache busting timestamp.

wp_enqueue_style('my-awesome-plugin-styles', Assets::uri('app.css'), [], Assets::time('app.css'));
wp_enqueue_script('my-awesome-plugin-scripts', Assets::uri('app.js'), ['jquery'], Assets::time('app.js'), true);

Vite ​

If you want to use a build tool, stick your source files in assets/src.

Forme assumes the entry point will be assets/src/js/app.js out of the box, but you can configure things for your own needs in vite.config.js. Forme uses Vite as its build tool - see also our section on Frontend Frameworks for more tips.

Queuing these up works exactly the same as for static files. The Assets helper will figure out the correct dist file names via the Vite generated manifest, so you can just include the original entrypoint file name as it appears in your src directory.

wp_enqueue_style('my-awesome-plugin-styles', Assets::uri('app.css'), [], Assets::time('app.css'));
wp_enqueue_script('my-awesome-plugin-scripts', Assets::uri('app.js'), ['jquery'], Assets::time('app.js'), true);

wp_enqueue_style('my-awesome-vue-styles', Assets::uri('vue.css'), [], Assets::time('vue.css'));
wp_enqueue_script('my-awesome-vue-app', Assets::uri('vue.js'), [], Assets::time('vue.js'), true);

npm run build (production build) and npm run dev (development hot reload) should work as you would expect.

If you need to run multiple instances of npm run dev - for example one in a theme and another in a plugin - you will need to manually set ports so they don't conflict.

# first instance in e.g. /foo-bar-theme - this will run on localhost:5173 port by default
npm run dev

# second instance in e.g. /foo-bar-plugin - you will need to set a port manually or it will fail
npm run dev -- --port=8081