I started a new Laravel project and now Laravel Mix has been replaced with Vite.
I've installed Alpine.js and launched it in the bootstrap.js file but, Alpine.js not recognized in the Laravel blade files and the other JS files.
vite.config
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from "path";
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
resolve:{
alias:{
'~alpine':path.resolve(__dirname,'node_modules/alpinejs'),
}
}
});
enter image description here
app.js
import './bootstrap';
import alpine from "./alpinejs/src/alpine";
console.log(alpine.version);
enter image description here
I add Alpine like the following.
bootstrap.js
import _ from 'lodash';
window._ = _;
import $ from 'jquery';
window.jQuery = window.$ = $
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
Related
I'm using vite js for assets bundling .
i installed alpine js and it's work in laravel blade files,
but i can't using other js file in blade.
actually js files are included and worked but i can't use js file data in alpine js,
this is vite.config.js file
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import alpine from "alpinejs/src/alpine";
import path from "path";
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
resolve:{
alias:{
'~alpine':path.resolve(__dirname,'node_modules/alpinejs'),
}
}
});
and this is bootstrap.js file
import axios from 'axios';
// import alpine from "alpinejs/src/alpine";
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
import Alpine from 'alpinejs';
window.Alpine=Alpine;
Alpine.start();
and this app.js file
import './bootstrap';
this is other js file that i can't use imageUrl property on alpine js in laravel blade
function imageViewer(){
return {
imageUrl:'this is test',
}
}
i also use vite directive to include assets to laravel blade file like this
#vite('resources/js/profileUploader');
#vite('resources/js/app.js')
when i say
x-data="{imageViewer().imageUrl}"
i get a error that imageUrl not defined
Hi i have a situation something like this
I have 2 files
main.js
utils.js
main.js
import { createApp } from 'vue'
import Utils from "./utils.js"
import router from "...."
import VueCookies from 'vue-cookies'
const app = createApp(App);
app.use(router);
app.use(VueCookies)
app.use(Toast,Utils.toastConfig())
app.mount('#app')
utils.js
import Vue from 'vue'
export default{
setCookie(params){
Vue.$cookies.set(params.name, params.value)
}
...
// so on related to Vue.$cookies
}
Note: above file usage is in multiple places, changing everywhere is not feasible now as we are migrated from vue2 to vue3
Question: Vue is undefined in utils.js how to make it work without much code changes
I'm trying to get bootstrap-vue installed in my vue-cli project.
I read here https://bootstrap-vue.js.org/docs :
Then, register BootstrapVue in your app entry point:
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
And import Bootstrap and BootstrapVue css files:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Alternatively you can import Bootstrap and BootstrapVue scss files in a custom SCSS file:
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
Make sure to import the custom.scss file in your app entry point:
import './custom.scss'
Be sure to #import or define your custom variable values before including Bootstrap SCSS (bootstrap.scss), and include BootstrapVue SCSS (bootstrap-vue.scss) after that to ensure variables are set up correctly.
Place all of the SCSS #imports into a single SCSS file, and import that single file into your project. Importing individual SCSS files into your project will not share variable values and functions between files by default.
Webpack and Parcel support prepending the scss modules with tilde paths (~) when importing from a scss file:
// Webpack example
#import '~bootstrap';
#import '~bootstrap-vue';
// Parcel example
#import '~bootstrap/scss/bootstrap';
#import '~bootstrap-vue/src/index.scss';
For more details how to configure asset loading and how modules are resolved, please consult the module bundlers documentation.
Well, where do I need to put all this? xD Im really new to vue.js. Is the main.js the entry point?
And if so, do I need to put all this there?
This is what my main.js looks like:
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './App.vue'
import Vue from 'vue'
import './style/customColor.scss';
//import 'regenerator-runtime';
import store from "./store/store";
import { USER_ROLECHECK } from './store/actions/user'
import { REQ_ADMIN_ROLE } from "./utility/namespaces";
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.config.devtools = true; //this line should be removed in the actual live build!
const router = new VueRouter({
routes: Routes,
mode: 'history'
})
router.beforeEach((to, from, next) => {
if(to.meta.reqAuth){
if(store.getters.isAuthenticated){
if(to.meta.reqAdmin){
store.dispatch(USER_ROLECHECK, REQ_ADMIN_ROLE).then(() =>{
next();
}).catch(() =>{
next({path: '/'})
})
}else{
next();
}
}else{
next({path: '/login'});
}
}else{
next();
}
})
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})
How do I need to update this, what must it look like for the integration to worK?
Yes, in a vue-cli app, the main.js file is your apps entry point.
What you need to place in your main.js is the following:
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
// Only needed if you want to use the bootstrap icons. Be aware these are currently in alpha
Vue.use(IconsPlugin)
// Import Bootstrap and Bootstrap-Vue css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
If you want to use SCSS you will need to create a new styles.scss (the name doesn't matter) file, place these two lines in it
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
and then import styles.scss in your main.js instead of the css files:
// Replace these
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// With this
import './path/to/your/styles.scss'
I created a react app using react-create-app. Now I am not able to import external js and bootstrap files.
index.js
import './assets/css/style.css';
import './assets/css/bootstrap-social.css';
import './assets/css/bootstrap.css';
import './assets/css/responsive.css';
import './assets/css/theme-default.css';
import './assets/css/jquery-ui.css';
import './assets/css/main.css';
import './assets/css/font-awesome.css';
// const $ = require('./assets/js/jquery.min.js');
// global.jQuery = $
// const app = require('./assets/js/bootstrap.min.js');
I have purchased s theme. Not I want to install external jquery and bootstrap. Note: css import working fine.
I am using JSPM and I am new to ES6 as well
I am wondering what is correct way to make imports when they are conditional in ES6
Method-1:
// should load only module required
import $ from 'jquery';
import 'bootstrap';
if(!$.core.login){
System.import('lib/log-in');
}else{
System.import('lib/logged-in');
}
Method-2:
//load both at once and consume which ever is valid
import $ from 'jquery';
import 'bootstrap';
import {loginPlz} from 'lib/log-in';
import {alreadyIn} from 'lib/logged-in';
if(!$.core.login){
loginPlz();
}else{
alreadyIn();
}
I would say (per this)
import $ from 'jquery';
import 'bootstrap';
if(!$.core.login){
import('./lib/log-in').then(loginPlz => loginPlz());
}else{
import('./lib/logged-in').then(alreadyIn => alreadyIn());
}