Vite MPA

Hello Mega Aleksandar,

To achieve your goal of creating a WordPress theme using Vite, Vue, and TailwindCSS, you'll need to set up a Vite project that can handle multiple pages (MPA). Here's a step-by-step guide to help you get started:

1. Initialize a Vite Project: First, create a new Vite project with Vue and TailwindCSS support.

   npm create vite@latest my-vue-app -- --template vue
   cd my-vue-app
   npm install
   

2. Install TailwindCSS: Follow the official TailwindCSS installation guide for Vue 3 and Vite.

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

   Configure your tailwind.config.js and add Tailwind directives to your CSS.

3. Configure Vite for Multiple Pages: Modify your vite.config.js to handle multiple HTML entry points. Here's an example configuration:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue()],
     build: {
       rollupOptions: {
         input: {
           main: 'index.html',
           subpage: 'subpage.html' // You can add more pages here
         }
       }
     }
   })
   

   With this configuration, Vite will generate separate chunks for each entry point.

4. Create Your HTML Files: For each page of your MPA, create an HTML file in your project root. For example, index.html for the homepage and subpage.html for a subpage. Each HTML file should reference its own Vue entry file.

5. Split Your JavaScript and CSS: To split your JavaScript and CSS into chunks, you can use dynamic imports in Vue and rely on Vite's code splitting. For CSS, you can create separate files and import them where needed, or use scoped styles in Vue components.

6. Build Your Project: Run the build command to generate the static assets.

   npm run build
   

   Vite will output the built files in the dist directory, with separate JS and CSS chunks for each page.

7. Integrate with WordPress: After building your project, you'll need to integrate the dist files into your WordPress theme. You can enqueue the scripts and styles in your theme's functions.php file, making sure to load the correct files for each template.

Here's an example of how you might enqueue your scripts and styles in WordPress:

function my_theme_enqueue_scripts() {
    if (is_front_page()) {
        wp_enqueue_script('main', get_template_directory_uri() . '/dist/main.js', array(), null, true);
        wp_enqueue_style('main', get_template_directory_uri() . '/dist/main.css');
    } elseif (is_page_template('subpage.php')) {
        wp_enqueue_script('subpage', get_template_directory_uri() . '/dist/subpage.js', array(), null, true);
        wp_enqueue_style('subpage', get_template_directory_uri() . '/dist/subpage.css');
    }
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

Remember to adjust the paths and dependencies according to your project structure and WordPress theme setup.

By following these steps, you should be able to create a WordPress theme with Vite, Vue, and TailwindCSS, with optimized assets for each page of your MPA.