Slim with VueJS single file components and hot reloading

1

I’m trying to setup a project using Slim and VueJS. The idea is to serve pages with Slim and to create some dynamic components with VueJS.

I’d like to use Single File Components. Therefore, I use Webpack. I’d like to use the hot reloading capabilities of vue-loader but since it requires to use webpack-dev-server, I’m a bit stuck since my app is already running on Apache server.

Any idea how I could do that?

2

You can set up 2 web servers, one for the front end using webpack-dev-server, and one for the backend using Apache. Either use two addresses, or different ports. You’ll probably need to set up CORS though.

3

Thanks for your reply. If I go this way, I guess I can’t render the page with Slim. Or at least not during development.

4

That’s correct, the page would not be rendered by Slim. If the Slim backend is an API, then it would not be much of an issue.

If you want to serve the html page with Slim, then the following page may be of interest: https://m.dotdev.co/using-webpack-2-hmr-in-laravel-development-2f632d6d06c6. It describes how to use Vue with hot reloading together with Laravel. I haven’t tried it with Slim, but the setup doesn’t seem specific to Laravel.

5

Thanks for the link, I’ll give a try when I have a chance :slight_smile:

I also found this link from VueJS webpack template documentation that might help.

1 Like