Upgrading from v2.x

Follow these steps to upgrade your Craftable PRO installation to v3.

New Requirements

Laravel v11.0+
Inertia.js v2

Upgrade

Update composer.json

Increase version number of "brackets/craftable-pro" in composer.json to ^3.0 and run:

composer update brackets/craftable-pro -W

Publish Migrations, Assets, and JS Stubs

Execute the following commands in your terminal to publish migrations, public assets, and JavaScript stubs required for Craftable PRO:

php artisan vendor:publish --provider="Brackets\CraftablePro\CraftableProServiceProvider" --tag="craftable-pro-migrations"
php artisan vendor:publish --provider="Brackets\CraftablePro\CraftableProServiceProvider" --tag="craftable-pro-public"
php artisan vendor:publish --provider="Brackets\CraftablePro\CraftableProServiceProvider" --tag="craftable-pro-js-stubs"

Don't forget to run the migrations after publishing them:

php artisan migrate

Update Configuration

If you've previously published the Craftable PRO configuration file, please ensure it's updated. In v3, we changed config for translations.

Compare your values in your project's config/craftable-pro.php with the default configuration found at vendor/brackets/craftable-pro/config/craftable-pro.php.

Update ziggy import

Replace ziggy import inside your resources/js/craftable-pro/index.ts to:

import { ZiggyVue } from "ziggy/src/js";

If error about missing Tightenco\Ziggypops up, clear the views cache, or remove @routes in resources/views/craftable-pro.blade.php and put back. Namespace was changed from Tightenco\Ziggy to Tighten\Ziggy.

Load built-in pages from vendor

In v2, the built-in pages like Media or Users were published to your project. As part of v3, we created a system for loading pages from vendor, so it is no longer required for them to be published.

You can safely delete the built-in pages from resources/js/craftable-pro/Pages unless you have edited any of them. The built-in pages are:

    └── resources/
        └── js/
            └── craftable-pro/
                └── Pages/
                    ├── Auth/
                    ├── CraftableProUser/
                    ├── Media/
                    ├── Permissions/
                    ├── Roles/
                    ├── Settings/
                    ├── Translations/
                    └── Home.vue

To correctly load pages from vendor, replace resolve part in your resources/js/craftable-pro/index.ts to following:

resolve: async (name: string) => {
    // Getting all the pages from the craftable-pro package
    const craftableProPagesGlob = import.meta.glob(
        "../../../vendor/brackets/**/resources/js/Pages/**/*.vue",
    );
 
    // Getting all local pages
    const pagesLocalGlob = import.meta.glob("./Pages/**/*.vue");
 
    // Resolving all the pages from the craftable-pro package and the local package
    const [pagesCraftablePro, pagesLocal] = await Promise.all([
        craftableProPagesGlob,
        pagesLocalGlob,
    ]);
 
    // Merging all the pages from the craftable-pro package and the local package with the local ones taking precedence
    const pages = { ...pagesLocal, ...pagesCraftablePro };
 
    // Finding the page that matches the name
    const pagePath = Object.keys(pages).find((key) =>
        key.endsWith(`/${name}.vue`),
    );
 
    // Throwing an error if the page is not found
    if (!pagePath) {
        throw new Error(`Page '${name}' not found.`);
    }
 
    // Getting the page component
    const pageComponent = (await pages[pagePath]()).default;
 
    const page = pageComponent;
 
    // Setting the layout if it's not set
    if (page.layout === undefined) {
        if (name.startsWith("Auth/")) {
            page.layout = GuestLayout;
        } else {
            page.layout = AuthenticatedLayout;
        }
    }
 
    return page;
},

Upgrade Tailwind config

To craftable-pro.tailwind.config.js add darkMode: 'class'.

module.exports = {
  content: [
    "./resources/views/craftable-pro.blade.php",
    "./resources/js/craftable-pro/**/*.vue",
    "./vendor/brackets/craftable-pro/resources/js/**/*.vue"
  ],
  darkMode: 'class',
  theme: {
  ...

Upgrade npm dependencies

To update to Inertia.js v2, you need to upgrade the npm package by running:

npm install @inertiajs/vue3@2

Update overloaded theme files

In case you overloaded any of the theme files, you need to check the changes in the original files and apply them to your own files.

Run npm install and npm run craftable-pro:dev

Finally, don't forget to run craftable-pro:build or craftable-pro:dev to ensure that your project's frontend assets are up-to-date.

npm run craftable-pro:build

Last updated on March 17, 2025

Installation Directory Structure