When I create a tool in Laravel Nova with
php artisan nova:tool drehimself/test-tool
And then add in NovaServiceProvider.php in the function tools, should appear a layout where showed a black hole. Only that when I press the option that appears in the menu on the left side, it shows nothing, not even the url changes.
Does anyone know what it could be?
Nova tools are customizable, as they primarily consist of a single-file Vue component that is totally under your control. Within your Vue component, you are free to make HTTP requests to any controller within your application.
By default the page should come with the address and a default layout like this. Image But when I do the artisan, mine doesn't look like this
You need to compile your assets first.
Go to your tool :
cd nova-components/TestTool
Then :
# Compile your assets for local development...
npm run dev
# Compile and minify your assets...
npm run prod
In addition, you may run the NPM watch command to auto-compile your assets when they are changed:
npm run watch
Refresh, you will see your tool now.
Related
I have just managed to install Svelte on top of Inertia js into a Laravel environment. So far it appears to work. However, I can not get the Svelte extension in google Chrome to work. I have read some comments that somewhere you need to have "dev:true" set where the default is "dev:false" I have also run npm run dev to no affect.
Any one know how to make this work?
Many Thanks !
I think dev: true props didn't add to Rollup or Webpack config file. Below is a link from the official docs:
Enable Svelte Google Chrome Dev Extension
On the right it shows the source code in dev tools live from the site, the left shows the actual .vue file content on the server.
As you can see nav-bar-icon20 {width:20px; height:20px;} has been removed, yet it still shows on the site.
Tried clearing browser cache, disabled cache in dev tools, ran php artisan cache:clear but nothing seems to work.
Thanks in advance.
Image left(source on server) and right(source from site dev tools)
Run
npm run watch-poll
to update the compiled vue file, wait for it to compile and then refresh the page
Developers Recently i am working on a vue js Website, and everything is working fine on Development but when i build the code using npm run build , the production build gets successfully build but when i try to open the index.html file inside dist directory the file gets opened in Browser but a Blank white page gets Displayed.
You need to start your server, not open the file directly.
Because Vue builds files and connects JS and CSS like it would be on the server.
And now, when you are opening the file, it can't find JS/CSS.
How do you want to deploy your app? I think the following post can help you:
How to deploy vue app
Please check if you have a vue.config.js file and if the configuration is correct according to your project setup.
I have an existing Laravel project, which I want to run in my browser, using VS Code. How do I do this?
There's a built-in terminal in vs code (on a different tab somewhere in the bottom), you can use it to serve your project by a local webserver, with the following command:
php artisan serve
After that you can see your project in your browser (localhost:8000 by default).
Please note this might not work out of the box on Windows.
Please I have not work with Vue before, please can anyone help me? I have Laravel code with Vue. I want to edit *.vue component such as navbar.vue but when add or remove anything and save there is no action in html (in browser)
Install and configure webpack to compile you vue files. If its already install, then do npm run watch to compile vue files to see your changes