I try to use Vue file for component in my library UI.
I add those libraries: #rollup/plugin-commonjs, #rollup/plugin-node-resolve and rollup-plugin-vue and I complete the file
script.javascript.js
const vue = require('rollup-plugin-vue')
const commonjs = require('#rollup/plugin-commonjs')
...
json(),
vue(/* VuePluginOptions */),
commonjs(),
but when I add css in my component:
<style lang="sass" scoped>
.my-component__text
font-weight: bold
</style>
I have this error:
C:\GIT\NpmPackage\MyComposant\ui\src\components\HelloWorld.vue:3:3: Unknown word
at error (C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup\dist\shared\rollup.js:198:30)
at throwPluginError (C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup\dist\shared\rollup.js:21718:12)
at Object.error (C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup\dist\shared\rollup.js:22672:20)
at Object.error (C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup\dist\shared\rollup.js:21895:42)
at C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup-plugin-vue\dist\style.js:51:56
at Array.forEach ()
at Object.transformStyle (C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup-plugin-vue\dist\style.js:51:23)
at async transform (C:\GIT\NpmPackage\MyComposant\ui\node_modules\rollup\dist\shared\rollup.js:21865:16)
at async ModuleLoader.addModuleSource (C:\GIT\NpmPackage\LorcaComposant\ui\node_modules\rollup\dist\shared\rollup.js:22090:30)
Related
I am trying to upgrade Laravel Mix in my Laravel project from v2.x to v4.x
Everything works fine in v2.x
I have multiple components declared globally which is only called on specific pages
app.js
function pageIs(page, data) {
if ($('body').data('page') === page) return data;
return {};
}
const ClientCompaniesComponents = pageIs('client-companies', {
'client_companies_listing': require('./components/ClientCompanies/List').default,
'company_users_invitations': require('./components/ClientCompanies/InvitationList').default,
'client_company_edit': require('./components/ClientCompanies/Edit').default,
'client_company_show': require('./components/ClientCompanies/Show').default,
});
....
const AllComponents = {
...ClientCompaniesComponents,
// other components
}
new Vue({
el: '#vue_app_content',
components: AllComponents,
....
For each component may contains local styles
<style>
.mb1 {
margin-bottom: 1em;
}
.first {
margin-left: 30px;
}
</style>
In Laravel Mix v2.x, local styles were not bundles in css/app.css and style will only work in specific pages in which the component was called.
In Laravel Mix v4.0, all local styles are now bundled in css/app.css
What should I do to keep the same behavior from v2.x?
extractVueStyles: true component styles bundled in css/app.css,
extractVueStyles: false all styles added as for all pages
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
extractVueStyles: true
})
.version();
I am trying to use this lib: https://github.com/themesberg/tailwind-datepicker
webpack.mix.js file:
mix.setPublicPath('htdocs');
mix.js('resources/js/app.js', 'htdocs/js').
js('resources/js/dateRangePicker.js', 'htdocs/js');
resources/js/dateRangePicker.js file:
import DateRangePicker from '#themesberg/tailwind-datepicker/DateRangePicker';
app.blade file
...
<script type="module" src="{{mix('js/dateRangePicker.js')}}"></script>
<script>
const dateRangePickerEl = document.getElementById('datepickstart');
new DateRangePicker(dateRangePickerEl, {
// options
}
</script>
...
But i am getting error in console:
Uncaught ReferenceError: DateRangePicker is not defined
What am I doing wrong and what is the best way to import and work with js modules?
On Laravel 5.8, I need to translate a project from Vue 2 to 3.
I adjusted the assembly to the stage that it stopped giving errors, and the components began to be displayed.
But! They are empty. No methods or internal properties. But external props works. No errors in terminal and console.
Why? How to solve it?
app.js :
require('./bootstrap');
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import {createApp} from 'vue';
let app = createApp({})
import PrivateOffice from "./PrivateOffice";
app.component('private-office', PrivateOffice);
app.mount("#app");
privateOffice.vue :
<template>
<div #click="consoleShow" class="myBtn">
Hello
</div>
</template>
<script>
export default {
name: "PrivateOffice",
data() {
return {
click: 0
}
},
methods: {
consoleShow() {
this.click++;
console.log(this.click)
}
}
};
</script>
<style lang="scss">
.myBtn {
padding: 12px;
background-color: #cdcdcd;
user-select: none;
cursor: pointer;
&:hover {
background-color: #8A8A8A;
color: white;
}
}
</style>
webpack-mix:
const mix = require('laravel-mix');
const webpack = require('webpack');
const path = require('path');
const dotenv = require('dotenv')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.override((config) => {
delete config.watchOptions;
});
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader",
options: {
prependData: `#import "public/scss/abstract.scss";`,
},
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
})
],
});
mix.alias({
'#': path.resolve('resources/js'),
"#model": path.resolve("resources/js/models"),
"#component": path.resolve("resources/js/components"),
"#style": path.resolve("resources/js/assets/scss")
})
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/js/public/scss/style.scss', 'public/css');
Rendered component:
On the click of a button, nothing happens.
We wrote the npm u command and now it works.
It looks like there was a version conflict, or some packages were missing.
Also a similar issue occurs if more than one app.js is included on the page.
Ahah, googled my own answer :D
I am using Laravel. the Frontside is developed by Blade and vue.
After Installing "vuetify". The other component which I have been using happened an error.
I don't know what is going on. the component doesn't be shown in the div.
when "const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');" is removed from mix.webpackconfig, the error from Calendar disappeared.
Is that related to installing "vuetifty"?
ERROR
[Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
found in
---> <VCalendarMonthly>
<VCalendar>
<ACalendar> at resources/js/components/ACalendar.vue
<Root>
app.js
Code
window.Vue = require('vue');
Vue.use(require('v-calendar'));
Vue.component('a-calendar', require('./components/ArticleCalendar.vue').default);
const app = new Vue({
el: '#app'
});
<script src=" {{ mix('js/app.js') }}"></script>
<div id="app">
<a-calendar url="{{ url }}"></a-calendar>
</div>
ACalendar.vue
<template>
<div>
<v-calendar v-on:dayclick="dayclick"></v-calendar>
</div>
</template>
export default {
data(){
return {
items:[
],
isLoaded : false,
isLoading : false,
isError : false,
}
},
props: {
url : String
},
}
</script>
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
],
});
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/chat.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
When I removed mix.webpackConfig and VuetifyLoaderPlugin,The calendar component works well.
After recently applied vuetify inside laravel 7 means with vuejs, I wasn't able to configure the vuetify actual settings, but that's what I have done and it works normal now.
Also I want to mention that vuetify has almost everything like calendars, tables buttons, forms etc...
resources/sass/app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Icons
#import '~#mdi/font/css/materialdesignicons.min.css';
#import '~material-design-icons-iconfont/dist/material-design-icons.css';
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
Note I have left the webpack.mix.js as it is
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Vuetify from 'vuetify';
Vue.use(VueRouter);
Vue.use(Vuetify);
import {routes} from './routes';
import App from './components/App.vue';
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
router: new VueRouter({mode: 'hash', routes}),
render: h => h(App)
});
View where components are rendering means where app id is located
//Inside head tag
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
//Inside body tag
<v-app id="app"></v-app>
<script src="{{ asset('js/app.js') }}"></script>
This way I have configured my newly vuejs project with vuetify inside laravel 7, everythings is working fine, I might have misconfigured something means there might be a good approach than mine. But for me it's working now.
I'm using Laravel facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is laravel-mix, laravel-mix using file called webpack.mix.js, and by using npm run dev command, laravel-mixcompile all js files into one webpack bundle js file.
Code of webpack.mix.js:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have a Main.js file which has some jquery code.
Main.js:
;( function( $, window, document, undefined ) {
'use strict';
$(window).on('load', function() {
alert('ready');
});
}
)( jQuery, window, document );
My directory structure is something like this
resources\assets\js
app.js
bootstrap.js
Main.js
Code of app.js:
require('./bootstrap');
Code of bootstrap.js:
try {
window.$ = window.jQuery = require('jquery');// jquery
require('bootstrap');// bootstrap framework js
require('./Main'); // Main.js
} catch (e) {
}
When i type command npm run dev all assets are compile into one file then why my Main.js jquery code which is just an alert popup doesn't execute on the page.
But when i change order of the bootstrap.js file into something like this then my Main.js code is execute.
try {
window.$ = window.jQuery = require('jquery');// jquery
require('./Main'); // Main.js
require('bootstrap');// bootstrap framework js
} catch (e) {
}
Why this thing is happening. Does conflict happen between bootstrap framework js file and Main.js file.
Replying to the tldr in the comments:
There is not any error comes, but when i load my page my Main.js script is not executed
I had this same issue and including the manifest.js and vendor.js solved these issues:
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>