Faster Laravel + Vue Development with a Symlinked Frontend Workspace

When working on a full Laravel + Vue stack project, IDE indexing can become a bottleneck — especially when PhpStorm tries to crawl node_modules or frontend files, and WebStorm gets overwhelmed with PHP routes and controllers.

I prefer working with both IDEs simultaneously: PhpStorm is dedicated strictly to PHP and Laravel work, while WebStorm handles only the JavaScript and Vue code. This separation helps me stay focused and makes each IDE faster and more efficient.

To support this workflow, I’ve been using a symlink-based workspace that splits backend and frontend cleanly across two folders. This gives both PhpStorm and WebStorm exactly the files they need — and nothing more.

It’s also worth noting that everything is still under a single Git repository — so you keep one version control system managing both backend and frontend codebases.

Folder Setup

Let’s say the Laravel project is in project/. Next to it, we create a frontend-only workspace:

project/
project-spa/

Here’s the full project-spa/ structure:

project-spa/
├── jsconfig.json
├── node_modules -> ../project/node_modules
├── package-lock.json -> ../project/package-lock.json
├── package.json -> ../project/package.json
├── src -> ../project/resources/app/ //-- or whatever is the path to your Vue/React app
├── vite.config.js -> ../project/vite.config.js
└── websocket.js -> ../project/websocket.js

Everything important is symlinked. You don’t need to duplicate anything. This allows you to:

• Run npm run dev from project-spa/
• Keep frontend logic self-contained
• Share config and dependencies directly from the Laravel project

IDE Configuration

PhpStorm Excludes (opened in project/):

• resources/app/
• node_modules/
• public/build/
• Any frontend-specific files

WebStorm Sees Only (opened in project-spa/):

• The src/ folder (symlinked to Laravel’s resources/app/)
• Your symlinked vite.config.js, package.json, and node_modules
• PHP, routing, migrations, and Laravel internals are completely ignored

To improve IntelliSense and auto-imports in WebStorm when using @ as a path alias, I include a jsconfig.json like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"]
}

This tells WebStorm how to resolve alias paths like @/components/Button.vue, making your development experience smoother.

Benefits

• Faster indexing for both IDEs
• Minimal IDE noise and distraction
• No duplication of package files or configuration
• Shared node_modules and Vite setup
• Better focus and separation of concerns
• Unified Git version control across the whole project
• Better path alias support in WebStorm with jsconfig.json

Automating the Symlinks

You can automate this with a quick shell script:

ln -s ../project/resources/assets src
ln -s ../project/package.json package.json
ln -s ../project/package-lock.json package-lock.json
ln -s ../project/node_modules node_modules
ln -s ../project/vite.config.js vite.config.js
ln -s ../project/websocket.js websocket.js

Or create a Makefile or npm script to streamline it further.

Final Thoughts

This setup keeps your frontend and backend logically separated while maintaining a single source of truth for config and dependencies. Both IDEs stay lean and snappy.

If you're working on large Laravel + Vue applications and want a clean way to boost productivity, try this approach — your CPU will thank you.