The simple process below does not work, though I do not understand why ...
using :
npm
vue
parcel
mkdir samat
cd samat
npm init -y
npm install vue --save
package.json
{
"name": "samat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.12"
}
}
Then I create index.html and index.js:
<!DOCTYPE html>
<html>
<head>
<script src="./index.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Finally, I run parcel index.html, and then look at localhost:1234 but see only this in the browser:
{{message}}
To use in-DOM templates (i.e., the <div id="app>{{ message }}</div>), import the full build of Vue that includes the runtime template compiler:
// import Vue from 'vue'
import Vue from 'vue/dist/vue.esm.browser' // full build
Related
I did a fresh laravel 9.19 installation with vue scaffolding and vite.js. everything works well just that the vue example component that comes with the fresh install of laravel refused to be rendered on the browser.
my environment
chrome Version - 108.0.5359.125 (Official Build) (64-bit)
node version - 19.3
Laravel 9.19
basically, as of today i'm using the latest version of everything.
I get a blank white screen on my browser with no errors on the console but the vue component is not rendering
I have tried suggestions from Laracast which is similar to my issue but nothing worked
content of my files
package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#popperjs/core": "^2.11.6",
"#vitejs/plugin-vue": "^3.0.1",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.56.1",
"vite": "^3.0.0",
"vue": "^3.2.37"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
// 'resources/sass/app.scss',
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
resouces/js/app.js file
/**
* 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 './bootstrap';
import { createApp } from 'vue';
/**
* Next, we will create a fresh Vue application instance. You may then begin
* registering components with the application instance so they are ready
* to use in your application's views. An example is included for you.
*/
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
// app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
// });
/**
* Finally, we will attach the application instance to a HTML element with
* an "id" attribute of "app". This element is included with the "auth"
* scaffolding. Otherwise, you will need to add an element yourself.
*/
app.mount('#app');
resouces/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
#vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
{{-- vue component goes here --}}
</div>
</body>
</html>
resources/js/components/ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
So i changed the boilerplate code in my resouces/js/app.js file and it worked. i don't know why.
i changed this
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
app.mount('#app');
to this
import './bootstrap';
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
createApp(ExampleComponent).mount('#app');
So I recently just encountered this issue. I got a blank page when I run npm run dev. Thankfully on the console, I got the error message in the image below.
So I went ahead to my app.js to change my Vue import from
import { createApp } from "vue";
to
import { createApp } from 'vue/dist/vue.esm-bundler';
I wrote hello world vue js 3 simple Programme. then it gives following error. I want to pass vue property value to HTML value. but it doesn't work . please help me to resolve this .
package.json
{
"name": "myfirstproject",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"vite": "^2.7.2",
"vue": "^2.6.14"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>Hello world {{msg}}</h1>
</div>
<script type="module">
import { createApp } from 'vue/dist/vue.esm.browser'
const app = createApp({
data(){
return {
msg: "Sri Lanka"
}
},
}).mount('#app');
</script>
</body>
</html>
I edited package.json , and add "vue": "^3.2.26" then delete node_modules and run yarn install ,
Then problem has been fixed
I have created a vue project using vue create myapp. There I have created several components within:
src/components/MyFirst.vue
src/components/MySecond.vue
I have also adjusted my vue.config.js the following way:
module.exports = {
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false
},
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
}
}
So that yarn build creates a single File app.js
Now I would like to use the components I defined there in a static HTML file:
<html lang="de">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.js"></script>
<script src="/static/app.js"></script>
<title>MyPage<title>
</head>
<body>
<my-comp></my-comp>
</body>
What do I have to do to achieve this?
Is there a way to compile it to one js file per component?
Vue CLI supports a library target, where you can register imported component definitions; or web component target, where components are automatically registered upon import (allowing you to drop in the component like in your example).
Edit the build NPM script in package.json to add the following parameters:
// package.json
{
"scripts": {
"build": "vue-cli-service build --target wc --name my-component src/components/MyComponent.vue"
}
}
The generated dist/demo.html shows example usage:
<script src="https://unpkg.com/vue"></script>
<script src="./my-component.js"></script>
<my-component></my-component>
Starting with the 5 minute quick start I've been playing around the angular2 beta and have run across a problem that has me stumped.
Here is a dumbed down version that shows the problem I have. First here a hello world app working perfectly.
package.json
{
"name": "...",
"version": "0.0.1",
"description": "...",
"author": {
"name": "...",
"email": "..."
},
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "^0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "^0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
index.html
<head>
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"> </script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app></my-app>
</body>
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
bootstrap(AppComponent);
app/app.component.ts
import {Component, View} from 'angular2/core';
import {RegisterFormComponent} from './accounts/register-form.component'
#Component({
selector: 'my-app',
})
#View({
template: 'hello world',
})
export class AppComponent {
}
I evntually want to call my Web Api service so I am trying to follow the docs for Http, I update boot.ts as follows:
new app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
And here's where things choke.
Chrome gives me:
uncaught SyntaxError: Unexpected token < - http:1
uncaught SyntaxError: Unexpected token < - angular2-polyfills.js:138
evaluating http://localhost:3000/angular2/http
error loading http://localhost:3000/app/boot.js
It also fails if I try to set the HTTP_PROVIDERS as a viewProvider on my component.
Has anyone else had any luck getting Http to inject properly in the angular2 beta?
Visual Studio 2015
Node.JS & Node.JS tools for visual studio
Using 'NPM start' to compile and run
This error occurs when you try to import something that is not being included in your HTML when using SystemJS. Module bundlers like Webpack handle all that for you.
For your case you have to add the Http bundle that's a separated bundle, for example
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
You'll see this same error when trying to use the router and you forgot to add the router bundle.
Check the difference between these two configurations from #pkozlowski-opensource's repos
Using SystemJS : For this case he would've to add http bundle, or router bundle if he wanted to use them.
Using Webpack : In this case Webpack bundles everything in that bundle.js file for you.
Glad it helped.
If you're using npm, include a script tag with the http reference to your local installation:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
I have a basic ReactJS application. I use webpack and would like to use moduls from bower. I installed bower-webpack-plugin and add jquery library in bower.
webpack.config.js
var BowerWebpackPlugin = require("bower-webpack-plugin");
var webpack = require("webpack");
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
}
]
},
plugins: [
new BowerWebpackPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
})
],
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
jquery: "./bower_components/jquery/dist/jquery.js"
}
}
}
Edit: Now I am using this webpack config with bower dependencies and without bower-webpack-plugin
bower.json
{
"name": "jquery",
"version": "2.1.4",
"main": "dist/jquery.js",
"license": "MIT",
"ignore": [
"**/.*",
"build",
"dist/cdn",
"speed",
"test",
"*.md",
"AUTHORS.txt",
"Gruntfile.js",
"package.json"
],
"devDependencies": {
"sizzle": "2.1.1-jquery.2.1.2",
"requirejs": "2.1.10",
"qunit": "1.14.0",
"sinon": "1.8.1"
},
"keywords": [
"jquery",
"javascript",
"library"
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Basic Property Grid</title>
<!-- include react -->
<script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append("This is Hello World by JQuery");
});
</script>
</body>
</html>
When I open main page, I get error message: "$ is not defined".
project structure
First, maybe you just forgot, but to be sure, I want to point out that it seems you showed us the jquery bower.json file in your question.
Your project doesn't actually seem to have a bower.json file at its root.
If you want to use Bower to manage dependencies, make sure you have a bower.json by running bower init at the root of your project and then run for instance bower install --save jquery.
See the bower doc for more info ;)
Besides that, the problem is that you're trying to use jQuery in index.html, so not in a webpack-managed module.
Webpack is not actually processing anything on your index.html.
What I mean is, put your jQuery code in index.jsx, instead of putting it in index.html:
// index.jsx
$(document).ready(function(){
$("body").append("This is Hello World by JQuery");
});
And it should work!
You can also remove this code, since the BowerWebpackPlugin handles that for you:
alias: {
jquery: "./bower_components/jquery/dist/jquery.js"
}
How does it work?
index.jsx is loaded through Webpack.
$ is used as a free variable, but thanks to the ProvidePlugin, it will resolve to require("jquery")
require("jquery") resolves to import jQuery from the bower components folder
thanks to the BowerWepackPlugin.
Without the ProvidePlugin and only the BowerWebpackPlugin, you would have had to write:
// index.jsx
var $ = require("jquery");
$(document).ready(function(){
$("body").append("This is Hello World by JQuery");
});
add a resolve field:
resolve: {
alias: {
jquery:"/your/path/to/jquery"
}
}
and add this to your plugin:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
hope it helped