Implement vite with handlebars

[thorst]

This project looks like what I need. I am building a site with Laravel, but would like to use handlebars templates and an api to make the pages dynamic.

I would like to have vite precompile my templates. Because this is a laravel project, all my files are located under /resources, and I have a /public folder as well. With webpack you would have the input be in resources, and the output saved in public.

I've installed vituum and @vituum/vite-plugin-handlebars packages with npm, here is my package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vituum/vite-plugin-handlebars": "^1.0.0",
        "laravel-vite-plugin": "^0.8.0",
        "sass": "^1.68.0",
        "vite": "^4.0.0",
        "vituum": "^1.0.0"
    }
}

And here is my vite.config.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
//import handlebars from 'vite-plugin-handlebars';
import vituum from 'vituum'
import handlebars from '@vituum/vite-plugin-handlebars'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                // CSS
                'resources/css/app.css',
                'resources/sass/styles.scss',
                'resources/css/template/base.css',
                // JS
                //'resources/js/app.js',
                'resources/js/template/base.js',
                'resources/js/pages/portfolio/base.js',
                // Handlebars
                'resources/handlebars/pages/portfolio/test.hbs',
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
        
        vituum(),
        handlebars({
            
        }),
    ],
});

As you can see I have a hbs file resources/handlebars/pages/portfolio/test.hbs that contains a simple template:

<h1>You made it.</h1>

Then in the page where I intend to use the template I have :

@vite(['resources/handlebars/pages/portfolio/test.hbs','resources/js/pages/portfolio/base.js'])

The output when I am running npm run dev is:

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
4:02:52 PM [vite] server restarted.

After this is where I get lost. How do I get the template to be usable in my JavaScript? Is this library capable of what I want, where I can have a directory with say 10 templates, each getting precompiled, and be able to use them within my js?

In theory, they would get compiled for testing, and then in my deployment script (using a github action) I would compile them on my production environment, so the compiled templates arent stored in git.

Any help is appreciated. Thanks,

[lubomirblazekcz]

How exactly would you want to use the templates in Laravel? The Vituum plugin compiles the .hbs files into .html files, if that understand this correctly, you would like to load the output .html ? In that case I would advise to fetch it as a static file via js.