As per the official documentation,
defineProps and defineEmits are compiler macros only
usable inside <script setup>. They do not need to be
imported and are compiled away when <script setup> is
processed.
The problem definition
I'm not able to use defineProps and defineEmits in <script setup> without importing it. Please refer to the error screenshot attached below.
The vue code which I'm executing
<!-- HelloWorld.vue -->
<template>
<h1>{{ props.message }}</h1>
</template>
<script setup>
// import { defineProps } from 'vue';
const props = defineProps({
message: {
type: String,
required: true,
}
});
</script>
The environment details for reference:
vue
^3.2.6 (3.2.19)
vue-cli
#vue/cli 5.0.0-beta.4
node:
v14.16.1
npm
6.14.12
We can resolve this issue with one of the below solutions.
Create Vue project with Vite. Follow this link for more information.
yarn create vite <project-name> --template vue
Add below rules in your eslint configuration file. Follow this link for more information.
// .eslintrc.js
module.exports = {
extends: ['plugin:vue/base'],
rules: {
'vue/script-setup-uses-vars': 'error',
}
}
I'm using the newest version of Fancybox 3 and I'm trying to implement some options like not showing the toolbar or a different transition effect. I have the css in the header and jquery is at the end of the source code. Why do the options not work? I've used Fancybox earlier without a problem.
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="{{ paths.theme }}js/scripts.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-fancybox]').fancybox({
toolbar: "false",
});
});
</script>
Is this the real output? Then this line -
<script src="{{ paths.theme }}js/scripts.js"></script>
will break further execution of JS code and ... nothing will work.
I've tried to add webpack to a Symfony 3.1 app. The problem is, when I add HMR, the asset function doesn't resolve correctly
// base.html.twig
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
// app/config/config_dev.yml
framework:
assets:
base_path: "http://localhost:8080"
Result: <script src="/http://localhost:8080/bundles/fosjsrouting/js/router.js"></script>
How can I tell Symfony to not prepend the starting / if the base_path begins with http://?
You can use base_urls. Protocol/host/port should not be used in base_path for assets.
https://symfony.com/doc/current/reference/configuration/framework.html#assets
Have installed the angularjs and Twitter.Bootstrap packages succesfully
This is my index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
This is my app.js:
var TodoApp = angular.module("TodoApp", []).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
And, this is my list.html:
<h1>Test: {{test}}</h1>
This should work fine. However the index.html is not showing the content of list.html. I think the angularjs part is not working properly.
No idea about what am i doing wrong?
Once you have defined a module, you need to define your controllers for that module and not independently.
Thus, your controller should be rewritten as:
TodoApp.controller('ListCtrl', [ '$scope', '$location',
function ($scope, $location) {
$scope.test = "Testing";
}
]);
This should show the view in question.
I would say, that if you check errors in console (in Chrome or IE press F12) you should see:
...Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider...
The reason for this expectation is that we ask IoC to inject $routeProvider while not correctly listing dependent modules. This is the above code:
var TodoApp = angular
// here we say: we do not need any other module
.module("TodoApp", [])
// here we ask: inject $routeProvider from other module
.config(function ($routeProvider)
So to make it runing we have to include the module 'ngRoute'
var TodoApp = angular
// here we say: we need these modules to make our module working properly
.module("TodoApp", [
'ngRoute'
])
// now we can ask for the provider,
// using minification-safe syntax
.config(
[ '$routeProvider',
function ($routeProvider) {
$routeProvider.
...
}]);
And also do not forget to also reference this module scripts:
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>
What is your directory structure can you check if list.html is in the same directory as index.html, if not specify a relative path from the application root?
Since no one has posted a full correct answer to this question and it hasn't been closed yet, here is another answer.
This is your function:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
This is a bare function, which isn't of much use. You need a controller so that Angular knows what to do with {{ test }}:
<div ng-controller="someController">
<h1>{{ test }}</h1>
</div>
If you insist on keeping the function as a separate variable, you could do so and still have a controller:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
TodoApp.controller('someController', ListCtrl);
This also works.
Despite of this, your UI won't show, as there's an error in it:
var TodoApp = angular.module("TodoApp", [])
You're using $routeProvider and .when(),.otherwise(), for which you need ngRoute as a dependency:
var TodoApp = angular.module("TodoApp", ['ngRoute'])
Your app should work after that.
enter link description here
I am trying about this:
text
I have this in my twig
<a href='{{ path('likes_show_names') }}' rel='facebox'>
And than in controller:
$view= $this->renderView('WallBundle:Statuses:likes_names.html.twig');
return new Response($view);
No error appear the network (chrome) is displaying code get 200. Facebox open the pop up but the connntent.. is missing...
When i check response => preview its displaying: This request has no preview available
What i am doing wrong please?
I put Facebox in my web/ directory. The file structure looks like this:
web/facebox
web/js/jquery.js
Then, on the routing, I set my default and the ajax-called controller:
vendor_some_bundle_homepage:
pattern: /
defaults: { _controller: VendorSomeBundle:Default:index }
vendor_some_bundle_test:
pattern: /test
defaults: { _controller: VendorSomeBundle:Default:ajax }
Next, I created a simple controller for both routes:
<?php
namespace Vendor\SomeBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DefaultController extends Controller
{
public function indexAction()
{
return $this->render('VendorSomeBundle:Default:indexTest.html.twig');
}
public function ajaxAction()
{
return $this->render('VendorSomeBundle:Default:ajaxTest.html.twig');
}
}
Then, and I think the most important file for you, the page where there is a link that open facebox :
<!-- indexTest.html.twig -->
<html>
<head>
<link href="{{ asset('facebox/src/facebox.css') }}" media="screen" rel="stylesheet" type="text/css"/>
</head>
<body>
<a href="{{ path('vendor_some_bundle_test') }}" rel='facebox'>click me</a>
<script src="{{ asset('js/jquery.js') }}" type="text/javascript"></script>
<script src="{{ asset('facebox/src/facebox.js') }}" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
});
</script>
</body>
</html>
Important: you should take care of your assets and of the routing. If there is some errors, they should be written in your app/log/dev.log file, or at last in your apache error.log.
Finally, create the view that will be included:
{# ajaxTest.html.twig #}
This is <em>some</em> remote content
This sample gave me the following result:
Note: there is still some assetic errors (see the close button at the right of the image), because I installed facebox quickly. The point of your question was the access to remote content, and here you have a sample you can follow to find your mistake.