I'm building a Laravel app with Vite bundling. Inside the Laravel app, I'm using a package with Vue components in it.
My vite.config.js:
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'packages/canvas/resources/sass/app.scss',
'packages/canvas/resources/js/app.js'
],
refresh: true,
}),
vue()
],
});
And here's router.js - the JS file with the Vue imports:
import AllStats from '../views/AllStats';
import EditPost from '../views/EditPost';
import EditSettings from '../views/EditSettings';
Directory structure:
(Laravel app root)
packages
|----canvas
|----resources
|----js
|----router
|----router.js // Vue imports are here
|----views
|----AllStats.vue
|----EditPost.vue
|----...
When I run npm run build, I get this error:
Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
error during build:
Error: Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
at error (file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
at ModuleLoader.handleResolveId (file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:22156:24)
at file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:22119:26
If I comment the first import out, the next one is called out, and so on. Also, the relative path to the views directory and the file names are correct.
I work on a Mac and I'm running the Laravel app in Docker.
Anyone has an idea what might be causing this?
Error says:
Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
So the problem is probably inside packages/canvas/resources/js/router/routes.js file.
Also, you may set up an alias with the absolute path which you can then use for quick reference, more here:
https://laravel.com/docs/9.x/vite#aliases
Related
i have created a new Laravel 9, Inertia, Vue3 project.
From the "old" laravel i know the "npm run hot"-script ("hot": "mix watch --hot").
Due to Laravel 9 runs with Vite, you should use the "vite build --watch" script to continuously compiling your code.
This works pretty fine except the .vue files. I have created a "Demo.vue"-Site and when i making changes there, nothing "recompiles" or is changing in the browser. Only when I change other files, the browser view changes to new vue-file.
I already have tried to change the "watch" settings in the vite.config.js, without further success.
Now I have rollback these changes and my vite.config.js looks like this
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import FullReload from 'vite-plugin-full-reload';
export default defineConfig({
plugins: [
FullReload(),
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
Do i have to configure anything else in the vite config or somewhere else?
I use laravel and vue js in a project that I am developing on. I have installed vue-color npm package in-order to load a colour picker.
npm package installed successfully. But when I try to import it to the blade it shows the error below.
Uncaught SyntaxError: Cannot use import statement outside a module
The below code will show how I used inside the blade.
#section
<div>
.......
</div>
#endsection
#push('script')
<script>
import Photoshop from 'vue-color';
var manageDisplayStore = new Vue({
el: '#containerMain',
name: 'manageDisplayStore',
components: {
// Photoshop
},
How can I import the package?
You can import NPM packages in your /resources/js/app.js, then include /resources/js/app.js in your layout template and only then call it within a Blade template.
The app.js most probably has inclusions of NPM packages (like Bootstrap / Vue) if you've used one of the default presets when installed Laravel.
Assign the import to global variable something like window.Photoshop = require('vue-color');
The app.js should be included in your layout by default as well.
Then use it in a Blade template like you've used. Photoshop or window.Photoshop variable should be available.
Check for the document being ready before usage or it could be undefined depending where you import the app.js.
I have this error
Module not found: Error: Can't resolve '#babel/runtime/regenerator' in 'C:\wamp64\www\project-dev\modules\Gallery\Resources\Assets\Backend\Views\Album'
when I execute this command npm run dev.
So to explain my laravel project directory:
app
modules
auth
backend
gallery
themes
admin
node_modules
resources
js
components
router
index.js
store
app.js
sass
views
package.json
webpack.mix.js
So in my router/index.js of vuejs app, I will includes routes from a module.
I make this:
import GalleryRoutes from "../../../../../modules/Gallery/Resources/Assets/Backend/routes";
// Vue Router
const router = new VueRouter({
base: '/admin',
mode: 'history',
routes: [
...constantRoutes,
...GalleryRoutes,
],
linkActiveClass: "active",
linkExactActiveClass: "active",
});
routes.js file from Gallery module:
// Views
import AlbumIndex from './Views/Album/Index.vue'
// Routes
export default [
// AlbumIndex
{
path: 'gallery/albums',
component: AlbumIndex,
name: 'backend.gallery.album.index',
meta: {
heading: 'Gallery',
title: 'Albums',
icon: 'fas fa-images',
showed: true
}
}
];
But I get the error above.
I think this is a bug related to the node_modules folder, I'm not sure.
It's possible to achieve what I want to do? (include .Vue or .js files from outside my root app directory).
PS: I try to make this to try to answer this question: Backend (VueJS) of laravel application with modules approach
Thank you to helping me :)
It's looking for a dependency that is not installed. In your case you can do npm i babel-runtime --save to install that dependency you're missing.
Installing whatwg-fetch fixed the issue for me
(Disclaimer: I'm not very proficient in Vue)
What is the correct way to import/include a Vuejs package in my project? I somehow seem to not be able to import a file.
I'm trying to import this package: https://github.com/sagalbot/vue-select
What I have done so far:
Ran the command: npm install vue-select
Tried adding the vue-select package to my Vue like so (in
resources/assets/js/app.js):
import vSelect from './components/Select.vue'
Vue.component('v-select', vSelect);
Now when I use the v-select in my HTML file it gives this error in console: [Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What I've tried to fix this:
Instead of using this in app.js I used it in my *.vue file, I don't use webpack/browserify I think, so import doesnt work :/ I prefer not to use browserify.
I have vue-resource package aswell and that created a vue-resource.js file in my public/js directory which I can import to use vue-resource. It seems like vue-select doesn't create its own vue-select.js file.
If you have any suggestions, please let me know.
I have looked at this question: Import vue package in laravel but I don't understand what paths and files the lines should be added to.
I think this is hust your import statement. If you have installed it through npm, then you should import from vue-select. Also, use require instead of import, This way:
Vue.component('v-select', require('vue-select'));
You may want to use it only in your Vue component, then you should load your own component as explained above, And in your own vue component say VueSelect.vueuse this:
<template>
<!-- use it with name 'v-select' in your component -->
<v-select></v-select>
</template>
<script>
export default {
...
components: { vSelect: require('vue-select') },
...
}
</script>
Then you can register your own component a s global,
Vue.component('vue-select', require( './components/VueSelect.vue') );
And use it in your root component:
<vue-select></vue-select>
Update
If you are using laravel, it gives you laravel mix out of the box which compiles down your assets using webpack. All you need to do is run a compile script:
npm run dev
If you are making changes to your js files, you wouldn't want to run this over and over, so you can run watch command:
npm run watch
If this doesnt work for you, try watch-poll instead. Als, make sure you have installed all dependencies first:
npm install
I made my own NPM package with a Vue component inside. At first I didn't use any building system, it was just a basic package with package.json and an src folder with a single *.vue component file and a main file index.js. I was exporting the component like this in my index.js:
module.exports = require('./TagsInput.vue');
The component worked fine when I installed it into a Laravel project.
Then I decided to use the webpack-simple vue-cli template to be able to build my package into the dist folder and I can't get things to work. The package builds fine when I build it from the package folder. But in Laravel I started getting this error:
TypeError: "exports" is read-only
Then I changed the index.js to this:
import TagsInput from './TagsInput.vue'
Vue.config.keyCodes.backspace = 8;
Vue.component('tags-input', TagsInput);
export { TagsInput }
export default TagsInput
And now I'm getting this error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <TagsInput>
...