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
Related
I started working on a new Laravel, Vue and inertiaJS project and I'm using VS code editor. The problem I'm having is that Vetur isn't getting that I'm using Inertia not pure Vue components; therefore, It keeps on highlighting everything in red because It assumes that everything is unidentified and unknown.
The below image is to demonstrate what I mean:
Is there a way I can work with InertiaJS on VS Code without having these disturbing errors everywhere and see only valid errors?
Vetur is deprecated, which is likely the cause of the problem. Switch to Volar.
From the Vue docs:
TIP
Volar replaces Vetur, our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
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
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.
When I create a fresh vue-cli project via this command
vue create hello-word
and this command to install vuetify
vue add vuetify
Then I saw my git changes like this
Two new dependencies have been installed in package.json.
vue-cli-plugin-vuetify
vuetify-loader
At first glance, I thought vue.config.js has specified using these two, but it's content only have these code.
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
So, how does vue-cli know I've installed this new vuetify loader?
Does it automatically pick those up?
After running vue add vuetify choose Vuetify 3 if you are using Vue 3:
vuetify-loader is a treeshaking plugin for Webpack. It gets installed automatically when you install Vuetify using "vue add vuetify".
So, vuetify-loader is used by Webpack for treeshaking the Vuetify components to only include the ones that you imported in your app. This way Webpack should be able to lower your build size by importing only the required components, and not all the Vuetify components.
See Vuetify Treeshaking
And this is the vuetify-loader project on Github
i can not figure out why, my new laravel installation with ui bootstrap, is loading bootstrap before jquery and popper, which means stuff like bootstrap toogle dosent work. The builded js file has first bootstrap then jquery and last popper, anyone has an idea why it is doing that?
Turns out the current laravel jquery vesion has a bug. The latest jquery vesion 3.5.1 fixes it, so running:
npm install jquery#3.5.1
npm run dev
should work.