I'm working on a legacy Vue 2 website with Vue CLI,
here's the packages.json:
{
"name": "vue-package",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.5.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.8",
"#vue/cli-service": "~5.0.8",
"vue-template-compiler": "^2.6.11",
"sass-loader": "^8.0.2",
"sass": "^1.26.5"
}
}
The body of public/index.html:
<body>
<div id="app"></div>
<script src="/src/main.js"></script>
</body>
The file src/main.js exists in the project, but when I started the app with npm run start but got GET http://localhost:8080/src/main.js 404 (Not Found) in the console.
I'm not familiar with Vue 2 / Vue CLI, and wasn't the author of the website.
When using Vue 3 with Vite, <script src="/src/main.js"></script> just work - how do I make this work with Vue 2 with Vue CLI?
I have a python project (using flask) where I am trying to use Vue with. The problem is that nothing vue related renders if I go peek the html definition.
I've installed vue via npm, also installed webpack and laravel-mix. They seem to be well configured.
I have the instance
import Vue from 'vue';
import alert from './components/Alert.vue';
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
test: 'is it working?'
},
components: {
alert
}
});
The component
<template>
<div class="alert" v-text="message"></div>
</template>
<script>
export default {
name: 'alert',
data() {
return {
message: 'I am an alert.'
};
}
};
</script>
<style>
.alert {
background: red;
}
</style>
And I am just trying to render the message
<div class="mdl-card__title mdl-color--primary mdl-color-text--white relative">
<h2 class="mdl-card__title-text">Login</h2>
</div>
<div id="app">
[[ test ]]
</div>
but when I try peeking in the html I see nothing.
Component not showing bellow the Login h2 tag
Package.json
{
"name": "I've hidden it",
"version": "1.0.0",
"description": "<h1>I've hidden it</h1>",
"main": "webpack.mix.js",
"directories": {
"test": "tests"
},
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"repository": {
"type": "git",
"url": "i've hidden it"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"laravel-mix": "6.0.6",
"postcss": "8.1",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"vue": "^2.6.14"
}
}
On running npm mix, laravel-mix will compile the file you've provided to mix.js function and save it to the second parameter of the function, which is public/js directory in your project. The .vue() tells laravel-mix that it is a vue app entry point.
Once its compiled, you need to import the compiled scripts into your html.
<script src="public/js/main.js"/>
Now your Vue app should work fine.
I am making a Vue.js Webapp. I am using raw Vue.js with BootstrapVue and SCSS. The scss styles work globally after I imported them in the app entry point, which in my case is the main.js file in the src folder of the project. But the BootstrapVue styles do not work anymore when I use them in any other .vue file except the main file "App.vue".
This is my vue.config.js file:
module.exports = {
css: {
sourceMap: true,
loaderOptions: {
sass: {
prependData: `
#import "src/scss/_variables.scss";
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap-vue/src/index.scss";
`,
}
}
}
};
And this is my main.js file and therefore the entry point of the app:
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "./scss/global.scss";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
render: (h) => h(App),
}).$mount("#app");
I imported BootstrapVue in my global.scss additionally. I did try to import my global.scss file in the component's style tag, I tried to import BootstrapVue directly in my component's style tag but that didn't work either.
So I am basically asking you for a solution to use BootstrapVue globally in any Vue.js Component. Maybe I made some mistake I did not notice. The error message in the console didn't really help me solve the problem.
EDIT:
This is my package.json file:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.14.0",
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
You're missing .scss on #import "node_modules/bootstrap/scss/bootstrap";. Should be #import "node_modules/bootstrap/scss/bootstrap.scss";
I'm having difficulty updating an existing project with Vuetify 2.0.4. I'm fairly sure I'm initializing Vuetify correctly - when I refreshed my app I noticed that breaking changes in Vuetify (e.g. round vs rounded) were being picked up, but once I'd fixed those, all I was left with was an unstyled app with error messages of the form
[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly?
for every Vuetify tag () in my code.
I'm wondering if my problem lies with my attempt to parse .sass files (in webpack.mix.js), but bottom line, I'm totally lost in space here and would appreciate some direction.
Thanks, Tom.
app.js
require('./bootstrap');
import i18n from './i18n.js';
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
import router from './routes.js';
import { store } from './store/store.js';
import VueUtils from './plugins/vue-utils.js';
Vue.prototype.$http = axios;
import Exception from './helpers/Exception'
window.Exception = Exception;
import App from "./components/App.vue";
import Navbar from './components/nav/NavBar.vue';
import Footer from './components/nav/Footer.vue';
import SwitchLanguage from './components/tools/SwitchLanguage.vue';
import SocialMedia from './components/tools/SocialMedia.vue';
import ReturnButton from './components/tools/ReturnButton.vue';
import RelistButton from './components/tools/RelistButton.vue';
import WarningNotification from './components/tools/WarningNotification.vue';
import QuestionButton from './components/tools/QuestionButton.vue';
import Vuelidate from 'vuelidate';
Vue.config.productionTip = true;
Vue.use(VueUtils);
Vue.use(Vuelidate);
Vue.use(require('vue-moment'));
const vuetifyOptions = {
theme: {
dark: true,
}
};
Vue.use(Vuetify);
Vue.component('my-navbar', Navbar);
Vue.component('my-footer', Footer);
Vue.component('switch-language', SwitchLanguage);
Vue.component('social-media', SocialMedia);
Vue.component('return-button', ReturnButton);
Vue.component('relist-button', RelistButton);
Vue.component('warning-notification', WarningNotification);
Vue.component('question-button', QuestionButton);
export const eventBus = new Vue();
new Vue({
store,
i18n,
router,
vuetify: new Vuetify(vuetifyOptions),
render: h => h(App)
}).$mount("#app");
package.json
{
"name": "herdingcats",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"wrkbox": "workbox injectManifest && npm run dev"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"caniuse-lite": "^1.0.30000985",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.1.4",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html2plaintext": "^2.1.2",
"idb": "^4.0.4",
"laravel-echo": "^1.5.4",
"libphonenumber-js": "^1.7.21",
"lodash.uniq": "^4.5.0",
"material-design-icons-iconfont": "^5.0.1",
"popper": "^1.0.1",
"pusher-js": "^5.0.0",
"register-service-worker": "^1.6.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-faq-accordion": "^1.2.1",
"vue-i18n": "^8.12.0",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.7",
"vue-socialmedia-share": "^1.0.1",
"vue-tel-input": "^2.5.0",
"vuelidate": "^0.7.4",
"vuetify": "^2.0.3",
"vuetify-loader": "^1.3.0",
"vuex": "^3.1.1",
"vuex-i18n": "^1.11.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.2",
"#vue/cli-plugin-eslint": "^3.9.2",
"#vue/cli-plugin-pwa": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"axios": "^0.19.0",
"babel-eslint": "^10.0.2",
"bootstrap": "^4.3.1",
"cross-env": "^5.2",
"deepmerge": "^4.0.0",
"eslint": "^6.1.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"friendly-errors-webpack-plugin": "~1.7",
"jquery": "^3.4",
"laravel-mix": "^4.1.2",
"mini-css-extract-plugin": "^0.8.0",
"popper.js": "^1.15",
"raw-loader": "^3.1.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-cli-plugin-vuetify": "^0.6.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.37.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"workbox-cli": "^4.3.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
runtimeCompiler: true,
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
],
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
}
}
]
}
]
},
};
webpack.mix.js
let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//mix.js('resources/js/app.js', 'dist/').sass('resources/sass/app.scss', 'dist/');
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
//new BundleAnalyzerPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
// module: {
// rules: [{
// test: /\.scss$/,
// use: [
// //fallback to style-loader in development
// process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
// "css-loader",
// "sass-loader"
// // {
// // loader: 'sass-loader',
// // options: {
// // implementation: require('sass'),
// // fiber: require('fibers'),
// // }
// // }
// ]
// }]
// },
}
);
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png"> ...
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="./manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="SafeVegetables">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="images/mstile-144x144.png">
<meta name="theme-color" content="#9CCC65">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>XXXX</title>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<script type='text/javascript'>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<noscript>
<p>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</p>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script>
let newWorker;
function showUpdateBar() {
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
};
// The click event on the pop up notification
document.getElementById('reload').addEventListener('click', function(){
newWorker.postMessage({ action: 'skipWaiting' });
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then(registration => {
console.log(`Service Worker was registered! Scope: ${registration.scope}`);
})
.catch(err => {
console.log(`Service Worker registration failed: ${err}`);
});
});
}
</script>
</body>
</html>
I want to addg ckeditor 4.11.4 in my ASP.NET Core MVC project with bundle.
I use ASP.NET Core 2.2 and the bootstrap bundling is working.
This is my package.json :
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": { },
"dependencies": {
"bootstrap": "4.3.1",
"font-awesome": "4.7.0",
"jquery": "3.4.1",
"popper.js": "2.0.0-next.4",
"ckeditor": "4.11.4"
}
}
And this is my bundleconfig.json file:
[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/ckeditor/contents.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/ckeditor/ckeditor.js"
],
"minify": { "enabled": false }
}
]
But this does not work. What's the problem?
Font-awesome css references use sprites and webfonts folders !
Copy font-awesome folder to wwwroot/lib folder.
and use in head
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/regular.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/solid.min.css" />